D3 / 设计 - 条形图，寻求时髦的方式来指示"N/A"

Question

一定有人对此有一个聪明的想法。我有一个很棒的条形图，上面有一些N/a值，比如佛蒙特州的。因此，佛蒙特州没有被排除在外。太棒了但我想在Vermont这个词的右边加上"N/A"，或者某种程度上表明Vermont是N/A。否则，它可能看起来像是一个错误，比如"嘿，佛蒙特州的数据在哪里？为什么这里有一个空白点？"

http://bl.ocks.org/greencracker/raw/4f7ff98cea98413ef5f4/

关键块是：

  barUpdate.select("rect")   
  .attr("width", function (d) { return x(d[age]);}) //< -- need something here?
  .attr("fill", function (d) {
    if (d.State == "Georgia") {return "goldenrod";} 
    else {return color(age); } ;})
  .attr("fill-opacity", function (d) {
    if (d.State == "United States") {return 0.6;} ;});

我会认为这样的事情？

.attr("width", function (d) { if (x(d[age])) == 0) {this.append("umm? something here?");}
{x(d[age]);} 

我知道我不能在"rect"后面加上"text"。我在这个问题上做了手脚。append（"g"）.append（"text"），但运气不好。

Answer 1

我不确定是否会使用N/A，因为它可能不明确。它是指不适用还是不可用。当然，它们是细微的差异，但选择一个不同的短语来表示缺乏数据可能是值得的。

也就是说。。。你可以很容易地为你所拥有的每个数据项添加一个新的文本元素，并为有数据的州将其设置为"，为没有数据的州设置为"N/a"。

我从你的要点中得出以下结论：http://bl.ocks.org/benlyall/361716dbd79f13488a4e

我添加的额外代码是：

barEnter.append("text")
        .attr("class", "value-label")
        .attr("x", -3)
        .attr("y", y.rangeBand() / 2)
        .attr("dy", ".35em")
        .attr("text-anchor", "start");
...
barUpdate.select("text.value-label")
         .attr("x", function(d) {
             return x(d[age]);
         })
         .text(function(d) {
             if (d[age] == "") {
                 return "N/A";
             } else {
                 return "";
             }
         });

很明显，您最终会在SVG中添加额外的文本元素，这对您来说是否重要取决于您自己。