javascript - d3js 不会使用数据数组绘制圆圈

Question

我有一个 d3js SVG 绘图，我正在做如下:

d 是一个包含如下条目的数组

  var d=[{"x":370,"y":40,"label":"Label 1"},    
        {"x":370,"y":150,"label":"Label 2"} ];

d3 的代码是这样的

    // here el is my HTML element and width/height are sizes
    var svg=d3.select(el).append('svg')
    svg.attr({width: width, height: height});

    // this works just fine
            svg.append("circle") // attach a circle
                .attr("cx", 200) // position the x-center
                .attr("cy", 100) // position the y-center
                .attr("r", 50);
    //  now trying to plot that 'd' array

            svg.data(d)
                .enter().append("circle")
                .attr("cy", function (d) {                    
                    return d.y
                })
                .attr("cx", function (d) {

                    return d.x
                })
                .attr("r", 10);

后一条指令不会生成 svg 元素。也没有显示错误。 “cy”/“cx”中的函数称为 ok。请让我了解问题所在。

Answer 1

不幸的是，我的 d3 有点生锈，但您似乎错过了 selectAll。请尝试以下操作:

svg.selectAll("*").data(d)
    .enter().append("circle")
    .attr("cy", function (d) {                    
        return d.y
    })
    .attr("cx", function (d) {
        return d.x
    })
    .attr("r", 10);

看看 jsFiddle here看到这个在行动；据我所知，selectAll 用于过滤掉可能已经存在的任何值。即使使用 "*" 作为 CSS 选择器，也没有匹配的值，因此使用 d 中的所有项目。