我是 D3.js 的新手，我正在尝试在每个数据点所在的图表上添加一个圆点。这是原始数据的示例：TIME,GEO,CITIZEN,GENDER,VALUE2011M01,Germany (until 1990 former territory of the FRG),Belgium,Males,0但在代码中，我将其格式化为一个名为nestedData 的变量，然后使用该图绘制两个线图UK.values 和Germany.values。如何在两个折线图的每一个上添加圆点？谢谢。这是我目前拥有的：<html><head> <script src="https://d3js.org/d3.v5.js"></script> <title> D3 Tutorial </title> <style> body { margin: 20px; } svg { padding: 50px; } .line { fill: none; stroke: black; } #UKLine { fill: none; stroke: red; } #germanyLine { fill: none; stroke: blue; } </style></head><body><h2>D3 Linegraph</h2><script> var dataPath = "data/migration.csv"; var width = 800; //specifies the width, height and margins of our SVG element var height = 600; var margin = 100; var rowConverter = function (d) { var timeData = d.TIME; var datum = timeData.split("M"); return { date: new Date(datum[0], datum[1] - 1), geo: d.GEO, value: d.VALUE } }; d3.csv(dataPath, rowConverter) .then(function (data) { console.log(data); // console.table(data); //loads table in a nice format - just to try it out (probably not super practical for this tutorial) var nestedData = d3.nest() .key(function (d) { return d.geo; }) .key(function (d) { return d.date; }) .rollup(function (leaves) { return d3.sum(leaves, function (d) { return parseInt(d.value); }); })
1 回答
HUX布斯
TA贡献1876条经验 获得超6个赞
您可能需要在创建之后再添加两个步骤paths
// these two selections are adding paths
svg.append("path")
.datum(germany.values)
.attr("class","line")
.attr("id","germanyLine")
.attr("d",lineGenerator);
svg.append("path")
.datum(UK.values)
.attr("class","line")
.attr("id", "UKLine")
.attr("d", lineGenerator);
//you want to add circles
svg.selectAll(".circle-germany")
.data(germany.values)
.join("circle") // enter append
.attr("class", "circle-germany")
.attr("r", "1") // radius
.attr("cx", d=> margin + xScale(new Date(d.key))) // center x passing through your xScale
.attr("cy", d=> yScale(parseInt(d.value))) // center y through your yScale
svg.selectAll(".circle-uk")
.data(UK.values)
.join("circle") // enter append
.attr("class", "circle-uk")
.attr("r", "1") // radius
.attr("cx", d=> margin + xScale(new Date(d.key))) // center x passing through your xScale
.attr("cy", d=> yScale(parseInt(d.value))) // center y through your yScale
添加回答
举报
0/150
提交
取消