D3.js 向折线图添加圆点
我是 D3.js 的新手，我正在尝试在每个数据点所在的图表上添加一个圆点。这是原始数据的示例：
TIME,GEO,CITIZEN,GENDER,VALUE
2011M01,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);
});
})
一只名叫tom的猫1回答
-
HUX布斯
您可能需要在创建之后再添加两个步骤paths// these two selections are adding pathssvg.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 circlessvg.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 yScalesvg.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
随时随地看视频慕课网APP
相关分类
JavaScript