Question

我正在使用D3的子弹图，我正在试图弄清楚如何在度量矩形的右侧显示实际的度量数。由于我想为每个子弹图执行此操作，我认为最好在bullet.js代码中执行此操作。我对D3很新，所以任何帮助都会非常感激！ Here是Mike Bostock的子弹图示例的链接，其中bullet.js包含在底部。

看起来措施代码在此代码段中处理：

// Update the measure rects.
            var measure = g.selectAll("rect.measure")
                .data(measurez);

            measure.enter().append("rect")
                .attr("class", function (d, i) { return "measure s" + i; })
                .attr("width", w0)
                .attr("height", height / 3)
                .attr("x", reverse ? x0 : 0)
                .attr("y", height / 3)                    
              .transition()
                .duration(duration)
                .attr("width", w1)
                .attr("x", reverse ? x1 : 0);  

            measure.transition()
                .duration(duration)
                .attr("width", w1)
                .attr("height", height / 3)
                .attr("x", reverse ? x1 : 0)
                .attr("y", height / 3);

我想我可以在添加rect之后添加类似的东西，但我没有运气。

measure.enter().append("text")
.attr("dy", "1em")
.text(function (d) { return d.measurez; })
.attr("x", reverse ? x0 : 0)
.attr("y", height / 3)
.transition()
.duration(duration)
.attr("width", w1)
.attr("x", reverse ? x1 : 0);

提前感谢您的考虑！

Answer 1

你几乎得到了 - 只需要考虑两件小事。首先，您不能两次致电.enter()。一旦操作了输入选择，它就会合并到更新选择中，您的第二个选择将为空。通过将选择保存在变量中可以轻松修复此问题，但在这种情况下，我建议为文本标签单独选择。

var measureLabel = g.selectAll("text.measure")
      .data(measurez);
measureLabel.enter()....;

其次，要将文本放在rect的右侧，在计算text元素的位置时，不仅需要考虑位置，还要考虑宽度。此外，您可以省略一些与text元素无关的元素。

measureLabel.enter()
      .append("text")
      .attr("class", function(d, i) { return "measure s" + i; })
      .attr("dy", "1em")
      .attr("dx", "1em")
      .text(String)
      .attr("x", reverse ? function(d) { return w0(d) + x0(d); } : w0)
      .attr("y", height / 3);

  measureLabel.transition()
      .duration(duration)
      .attr("x", reverse ? function(d) { return w1(d) + x1(d); } : w1);

完整示例here。

在D3子弹图中添加“度量”标签

1 个答案: