d3 rect不显示

帕瓦莫

我想显示一些数据的图例(标题?)。对于图例的每个部分,我将rect和ap附加到父分区。问题是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,但是都得到rect:

  1. 没有出现
  2. 似乎具有0的宽度(使用Firefox显示其面积)

我的代码中有什么错误吗?有更好的方法来实现这一目标吗?我对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);
});
罗伯特·朗森

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章