javascript - D3 白色刻度线(网格线)覆盖了文字，如何纠正？

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) 附加 新数据。

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) 将文本附加/嵌套到 (1) 中定义的组。

bar.append("text")

由于文本与组嵌套，并且组在 x 轴之前插入到 DOM 中，因此刻度线显示在文本上方。

但是如果我们做一些简单的事情，例如将 x 轴调用移动到 bar 调用之前，则刻度线将不会显示，因为它们将绘制在 bar 下方。因此，不幸的是，您需要拆分矩形和文本的分组。

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

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。

希望这有帮助!