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）在上面的组中添加一个矩形。 3）绘制放置在（1）之后（即超过）的x轴。

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

4）向（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。

希望这会有所帮助！