d3 版本 4 问题与矩形和文本答案

【问题标题】：d3 version 4 issue with rectangle and textd3 版本 4 问题与矩形和文本
【发布时间】：2016-11-21 02:05:03
【问题描述】：

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

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); });

【问题讨论】：

标签： d3.js

【解决方案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>

【讨论】：

但是，如果您更改为 v3 () 它会绘制矩形，但不会在 v4 中绘制？
@user3359706，我现在明白了。进入/更新/退出模式在 v4 中发生了变化。您现在需要明确地merge 输入和更新选择，请参阅上面的更新。
@user3359706，这是你的fiddle updated v4。
那个小提琴正在运行 v3。当我在本地浏览器中更改为 v4 时，由于某种原因仍然失败？
我的错误。更新的小提琴按预期工作。谢谢。