d3 rect没有显示出来

时间:2015-02-24 14:42:47

标签: javascript jquery d3.js

我想显示某些数据的图例(标题?)。 对于图例的每个部分,我将一个rect和一个p附加到父分区。 问题是rect没有出现。

这是我的代码:

var groups = {{ groups|safe }};
groups.forEach(function(group, i) {
    var div = d3.select("#collapse-legend");
    div.append("rect")
        .attr("width", 17)
        .attr("height", 17)
        .style("fill-opacity", 1)
        .style("fill", function (d) { return c(i); });
    div.append("p").text(group)
});

现在,当我检查我的网页内容时,我得到了rect和p,但是直接:

  1. 没有出现
  2. 似乎宽度为0(用firefox显示其区域)
  3. 我的代码中有错误吗?有没有更好的方法来实现这一目标?我是javascript和d3.js的新手所以请放纵^^

    更新

    所以这就是我的结局 HTML:

    <div ...>
        <svg id="legend-svg"></svg>
    </div>
    

    JavaScript的:

    // set height of svg
    d3.select("#legend-svg").attr("height", 18*(groups.length+1));
    
    // for each group, append rect then text
    groups.forEach(function(group, i) {
        d3.select("#legend-svg").append("rect")
            .attr("y", i*20)
            .attr("width", 18)
            .attr("height", 18)
            .style("fill-opacity", 1)
            .style("fill", function (d) { return c(i); });
        d3.select("#legend-svg").append("text")
            .attr("x", 25)
            .attr("y", i*20+15)
            .text(group);
    });
    

2 个答案:

答案 0 :(得分:6)

<rect>之类的SVG元素不能是html <div>元素的直接子元素。您必须将它们放在<svg>容器元素中。

答案 1 :(得分:0)

为rect设置X + Y值:

.attr("x", 50)
.attr("y", 50)