Javascript 带点的d3折线图有问题

所以我想我的主要问题是，我的数据并不像所有的d3演示一样。我制作了一个插件，将我的所有数据规范化为表单：

[{"name":"someName", "values":[{x1, y1}, {x2, y2}, ... {xn, yn}, ...]

因此，这段代码适用于以下行：

var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

// data is a list of objects, each of which respresents a line
var series = svg.selectAll(".series")
    .data(dataSimplified)
    .enter().append("g")
    .attr("class", "series");

series.append("path")
    .attr("class", "line")
    // the following function requires a list of things, like [{x0, y0}, {x1, y1}, ... {xn, yn}]
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return color(d.name); });

所以它基本上迭代每个“值”字段，并执行line函数来获得x和y。但是如果我对分数做了类似的事情，它就不起作用了！但是，以下方法确实有效：

// add points
for(var i=0; i<dataSimplified.length; i++){
    for(var j=0; j<dataSimplified[i].values.length; j++){
        svg.append("circle")
            .attr("r", 3.5)
            .attr("cx", function(d){ return x(dataSimplified[i].values[j].x); })
            .attr("cy", function(d){ return y(dataSimplified[i].values[j].y); })
            .attr("fill", function(d){ return color(dataSimplified[i].name); });
    }
}

//添加点
for（var i=0；i您可以再次调用
.data
for（在本例中，嵌套在
标记中的
标记）。类似以下内容：

series.selectAll('circle')
    .data(function(d, i, j) { return d.values; })
    .enter().append('circle')
        .attr("r", 3.5)
        .attr("cx", function(nd){ return x(nd.x); })
        .attr("cy", function(nd){ return y(nd.y); })
        .attr("fill", function(nd, i, j){ return color(dataSimplified[j].name); });

线条和圆圈之间似乎不一致的原因是D3只是底层DOM节点（html或svg）上的一个薄层所以在svg中，
是一个包含点的内部列表的单个标记，而
只是一个圆。因此，一个系列的结构类似于此（假设有三个数据点）



因此，您的代码将反映相同类型的结构。
您可以再次调用
.data
（在本例中，嵌套在
标记中的
标记）。类似如下：

series.selectAll('circle')
    .data(function(d, i, j) { return d.values; })
    .enter().append('circle')
        .attr("r", 3.5)
        .attr("cx", function(nd){ return x(nd.x); })
        .attr("cy", function(nd){ return y(nd.y); })
        .attr("fill", function(nd, i, j){ return color(dataSimplified[j].name); });

线条和圆圈之间似乎不一致的原因是D3只是底层DOM节点（html或svg）上的一个薄层所以在svg中，
是一个包含点的内部列表的单个标记，而
只是一个圆。因此，一个系列的结构类似于此（假设有三个数据点）



因此，您的代码将反映相同类型的结构。
您想要这个。您想要这个。谢谢，这看起来比嵌套的for循环好得多！我必须尝试更好地理解.data对于函数的含义以及.enter（）的含义。从jquery世界来看，它看起来毫无意义，请选择“所有圆”（不存在）并设置一些数据函数，调用enter（）然后附加一个圆圈？这很奇怪。仅仅附加一个圆圈看起来很奇怪，但是当你最终开始数据更改并想要控制编辑项和删除项的精确动画时，这个结构非常强大。谢谢，这看起来比嵌套的for循环好得多！我必须试着更好地理解。数据用f表示什么函数和.enter（）的含义。来自jquery世界，它看起来毫无意义，选择所有圆（不存在）并设置一些数据函数，调用enter（）然后添加一个圆圈？这很奇怪。仅仅添加一个圆圈看起来确实很奇怪，但是当你最终开始数据更改并想要控制编辑和删除项目的精确动画时，这个结构非常强大。