Question

我在D3中绘制一个简单的水平条形图。我将条形分成较小的长方形白色刻度线。但我的刻度标记正在翻阅一些文字。我怀疑我是以某种方式错误地绘制元素。你怎么看？如何使网格线仅切割条形而不是文本？

你可以看到它看起来很俗气，整个事情就在这里： http://bl.ocks.org/greencracker/4378b817d4d5393c4e37

我认为这是关键部分： ...

  var bar = svg.selectAll("g.bar") // create the bars
      .data(data)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(0," + y(d.name) + ")"; });

  bar.append("rect") // draw the bars
      .attr("width", function(d) { return x(d.value); })
      .attr("height", y.rangeBand())
      .style("opacity", 0.5);

  svg.append("g") // draw my x axis, which includes the white tickmarks
      .attr("class", "x axis")
      .call(xAxis);

  bar.append("text") // then attach text to each bar
      .attr("class", "value")
      .attr("x", function(d) { return x(d.value); })
      .attr("y", y.rangeBand() / 2)
      .attr("dy", ".35em")
      .attr("text-anchor",  function (d) {
        if (d.name === "Business, Management, Marketing") {return "end"}
        else {return "start"} ;}) // correct for "business" being very long
      .attr("dx",  function (d) {
        if (d.name === "Business, Management, Marketing") {return -3}
        else {return 3} ;}) // correct for "business" being very long
      .text(function(d) { return (d.name); });

（是的，之前我问了一个类似的问题，但这个问题有点不同，我无法弄清楚。Transition on axis -- losing grid lines (ticksize), how to transition in correct order?）

Answer 1

您对以正确顺序绘制元素的怀疑是正确的。

目前正在发生的事情是：

1）追加＆lt; g class =＆＃34; bar＆＃34;＆gt;对于新数据。

var bar = svg.selectAll("g.bar")
  .data(data)
  .enter().append("g")

2）在上面的组中添加一个矩形。

bar.append("rect")

3）绘制x轴，它放在（1）之后（即）之上。

svg.append("g")
  .attr("class", "x axis")
  .call(xAxis);

4）将/ text文本附加到（1）中定义的组。

bar.append("text")

由于文本与组嵌套并且组在x轴之前插入DOM，因此标记显示在文本上。

然而如果我们做一些简单的事情就像在条形码调用之前移动x轴调用一样简单，则不会显示标记，因为它们会在条形图下方绘制。所以不幸的是，你需要拆分矩形和文本的分组。

这也意味着您需要为文本标签定义转换/翻译：

svg.selectAll("text.value")
  .data(data)
  .enter().append("text")
  .attr("class", "value")
  .attr("transform", function(d) {
    return "translate("+ x(d.value)+5 + "," + (12+y(d.name)) + ")";
  })
  .attr("text-anchor",  function (d) {
    if (d.name === "Business, Management, Marketing") {return "end"}
    else {return "start"} ;}) // correct for "business" being very long
  .attr("dx",  function (d) {
    if (d.name === "Business, Management, Marketing") {return -3}
    else {return 3} ;}) // correct for "business" being very long
  .text(function(d) { return (d.name); });

上述内容适用于除商务，管理，营销以外的所有标签，因为其翻译版本为5800.

希望这有帮助！

D3白色刻度线（网格线）正在绘制文字，如何更正？

1 个答案: