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元素。也没有显示错误。内部功能＆＃34; cy＆＃34; /＆＃34; cx＆＃34;被称为好。请让我理解这个问题。

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中的所有项目。

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

1 个答案: