我正在尝试修改此示例中的以下代码
https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54/
线图或连接散点图（首选）。怎么办？
几乎所有简单的 D3 示例我都会找到条形图或具有不同的语法，因为它们从
cvs this.g.selectAll('.bar')
.data(this.barData)
.enter()
.append('rect')
.attr('class', 'bar')
.attr('fill', 'rgb(34, 167, 240)')
.attr('x', (d) => this.x(d.season))
.attr('y', (d) => this.y(d.viewers))
.attr('width', this.x.bandwidth())
.attr('height', (d) => this.height - this.y(d.viewers));
我相信这是一个线图，不确定它是否满足您的要求，请告诉我：
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
//console.log(data);
//});
var data = [
{ x: 1, y: 2500000 },
{ x: 2, y: 3800000 },
{ x: 3, y: 5000000 },
{ x: 4, y: 6900000 },
{ x: 5, y: 6900000 },
{ x: 6, y: 7500000 },
{ x: 7, y: 10000000 },
{ x: 8, y: 17000000 }
];
// Add X axis
var x = d3.scaleLinear()
.domain([0, 10])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 20000000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add dots - scatter plot
//svg.append('g')
// .selectAll("dot")
// .data(data)
// .enter()
// .append("circle")
// .attr("cx", function (d) { return x(d.x); } )
// .attr("cy", function (d) { return y(d.y); } )
// .attr("r", 1.5)
// .style("fill", "#69b3a2")
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y) })
)
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("season");
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("viewers");
</script><script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>重要对于从 CSV 读取，在示例中掌握如何摆脱它相对简单。以下是从 csv 加载数据的方法：
d3.csv("https://.../master/Example_dataset/2_TwoNum.csv", function(data) {
//do something with data here
});
所以，基本上你是在回调中进行绘图的（一旦你获得了数据，对吧？）。如果您在编写脚本时知道数据（如您的示例中所示），则只需分配数据并在
d3// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//d3.csv("https://raw.githubusercontent.com/holtzy/data_to_viz/master/Example_dataset/2_TwoNum.csv", function(data) {
//console.log(data);
//});
var data = [
{ x: 1, y: 2500000 },
{ x: 2, y: 3800000 },
{ x: 3, y: 5000000 },
{ x: 4, y: 6900000 },
{ x: 5, y: 6900000 },
{ x: 6, y: 7500000 },
{ x: 7, y: 10000000 },
{ x: 8, y: 17000000 }
];
// Add X axis
var x = d3.scaleLinear()
.domain([0, 10])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 20000000])
.range([ height, 0]);
svg.append("g")
.call(d3.axisLeft(y));
// Add dots - scatter plot
//svg.append('g')
// .selectAll("dot")
// .data(data)
// .enter()
// .append("circle")
// .attr("cx", function (d) { return x(d.x); } )
// .attr("cy", function (d) { return y(d.y); } )
// .attr("r", 1.5)
// .style("fill", "#69b3a2")
svg.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y) })
)
svg.append("text")
.attr("transform",
"translate(" + (width/2) + " ," +
(height + margin.top + 20) + ")")
.style("text-anchor", "middle")
.text("season");
// Add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
// text label for the y axis
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("viewers");
</script><script src="https://d3js.org/d3.v4.js"></script>
<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>//svg.style("text-anchor", "middle") //updated post 2023-10-30
addCSS(".chartDiv > svg {text-anchor: middle}");
addCSS函数描述如下：
function addCSS(styleText) {
styleElement = window.document.createElement("style")
styleElement.setAttribute("id","style");
styleElement.innerText = styleText;
window.document.getElementById("HeadNodeID").appendChild(styleElement);
}