Question

此方法在v3中用于附加带有文本的矩形但在v4中失败。我收到一条错误消息＆＃34;读取属性＆＃39; querySelectorAll＆＃39;＆＃34;但它可能与这段代码无关。任何建议，将不胜感激。

group = vis.selectAll(".rectangle")
         .data(data); 


gEnter = group.enter()
    .append("g")
    .attr("class", "rectangle")
    .attr("fill", function (d) { return d.colour; });


gEnter.append("rect") 
  .attr("class", "rectband");


group.selectAll(".rectband")
     .attr("width", 18)
     .attr("height", 18)
     .style("opacity", .5) 
     .style("stroke", "black")
     .style("cursor", "move");


svgEnter = group.enter()
      .append("svg")
      .attr("height", 18)
      .attr("class", "interval")
      .attr("width", 10)
      .attr("x", 20)
      .attr("y", 20);

svgEnter.append("text")
                .attr("class", "intervalLabel")
                .attr("x", 6)
                .attr("y", 14)
                .style("pointer-events", "none")
                .text(function (d) { return (d.name); });

Answer 1

您的代码有点有效，但您的文字元素位于彼此之上，并且位于svg容器中，该容器的宽度不足以显示其内容。

无论如何，如果你让你的svg更宽，那么文字显示就好了：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>

</head>

<body>
  <script>
  
    var vis = d3.select('body')
      .append('svg')
      .attr('width', 400)
      .attr('height', 400);
  
    group = vis.selectAll(".rectangle")
      .data([
        {
          colour: 'red',
          name: 'one'
        },
        {
          colour: 'green',
          name: 'two'
        }
      ]);


    gEnter = group.enter()
      .append("g")
      .attr("class", "rectangle")
      .attr("fill", function(d) {
        return d.colour;
      });

    gEnter.append("rect")
      .attr("class", "rectband")
      .merge(gEnter)
      .attr("width", 18)
      .attr("height", 18)
      .style("opacity", .5)
      .style("stroke", "black")
      .style("cursor", "move");

    svgEnter = group.enter()
      .append("svg")
      .attr("height", 18)
      .attr("class", "interval")
      .attr("width", 30)
      .attr("x", 20)
      .attr("y", 20);

    svgEnter.append("text")
      .attr("class", "intervalLabel")
      .attr("x", 6)
      .attr("y", 14)
      .style("pointer-events", "none")
      .text(function(d) {
        return (d.name);
      });
  </script>
</body>

</html>

d3版本4问题矩形和文本

1 个答案: