Question

看起来代码很好，但无缝执行却没有。元素不在元素之内。我做错了什么？

var body = d3.select("body");

var svg = body.append("svg")
            .attr("width", 500)
            .attr("height", 800);

svg.append("defs")
            .append("rect")
            .attr("id", "square")
            .attr("width", 50)
            .attr("height", 50);

var row = d3.range(10, 361, 50);
console.log(row);

svg.append("g")
            .attr("id", "row1")
            .data(row)
            .enter()
                .append("use")
                .attr("href","#square")
                .attr("y", 10)
                .attr("x", function(d){return d})
                .attr("stroke-width", 2)
                .attr("stroke", "yellow")
                .attr("fill", "red");

看看出口：

Using the Chromium browser

Answer 1

在绑定数据之前，您错过了.selectAll("use")。

＆＃13;

var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 800);

svg.append("defs")
  .append("rect")
  .attr("id", "square")
  .attr("width", 50)
  .attr("height", 50);

var row = d3.range(10, 361, 50);

svg.append("g")
  .attr("id", "row1")
  .selectAll("use")
  .data(row)
  .enter()
  .append("use")
  .attr("href", "#square")
  .attr("y", 10)
  .attr("x", function(d) {
    return d
  })
  .attr("stroke-width", 2)
  .attr("stroke", "yellow")
  .attr("fill", "red");

＆＃13;

<script src="https://d3js.org/d3.v5.min.js"></script>

＆＃13;

元素在D3.js中的使用

1 个答案: