我是 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); }); })
D3.js 向折線圖添加圓點
一只名叫tom的貓
2022-06-09 19:36:52
