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

Question

对此必须有人有一个聪明的主意。 我有一个很棒的条形图，其中包含一些 N/A 值，例如佛蒙特州。因此，佛蒙特州没有受到限制。伟大的!但我想在“佛蒙特州”一词的右侧附加“N/A”，或者以某种方式表明佛蒙特州是一个 N/A。否则，它可能看起来像一个错误，比如“嘿，佛蒙特州的数据在哪里？为什么这里有一个空白点？”

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

关键 block 是这样的:

  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]);} 

我知道我无法将“文本”附加到“矩形”。我摆弄了 this.append("g").append("text") 但没有运气。

Answer 1

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

也就是说...您可以轻松地为您拥有的每个数据项添加一个新的文本元素，并将其设置为“”(对于有数据的州)和“N/A”(对于没有数据的州) 't。

我已经 fork 了你的要点并提出了这个: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 中得到额外的文本元素，这由您决定这对您是否重要。