Question

我正在尝试创建一个折线图，在每个数据点上我都有一个圆圈标记。我成功地设法显示了三条不同的线。但是，当我尝试添加圆圈标记时，只显示一个。我使用以下代码：

var data = [
                    {"date": "2009", "Bob": "1", "Alice" : "2", "Cecilia" : "3"},
                    {"date": "2010", "Bob": "2", "Alice" : "1", "Cecilia" : "3"},
                    {"date": "2011", "Bob": "3", "Alice" : "2", "Cecilia" : "1"},
                    {"date": "2012", "Bob": "4", "Alice" : "5", "Cecilia" : "1"},
                    {"date": "2013", "Bob": "3", "Alice" : "1", "Cecilia" : "2"},
                    {"date": "2014", "Bob": "1", "Alice" : "2", "Cecilia" : "3"}
                    ];

color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));

var users = color.domain()
     .map(function(name) {
            return {
                name: name,
                values: data.map(function(d) {
                return {date: d.date, ranking: +d[name]};
                })
            };
        });

然后添加我执行以下操作的行：

 var user = svg.selectAll(".user")
 .data(users)
 .enter().append("g")
 .attr("class", "user");

 user.append("path")
 .attr("class", "line")
 .attr("d", function(d) { return line(d.values); })
 .style("stroke", function(d) { return color(d.name); });

然后添加圆圈我使用以下代码，导致我的图表左上角只出现一个圆圈

        var nodes = svg.append("g").selectAll("circle")
        .data(users)
        .enter().append("circle")
        .attr("r", 10)
        .style("fill", "blue")
        .attr("transform", function(d) { return "translate(" + x(d.values.date) + "," + y(d.values.ranking) + ")"; });

我是d3和javascript的新手，我很感激任何帮助我的代码正常工作。

在d3线图中向数据点添加圆圈

0 个答案: