Question

我在D3中有一个分层条形图，有两个＆＃34;等级＆＃34;我希望显示一个包含两个不同项目的图例。

当用户点击条形图值X以进入下一级别时，我希望X的值（即字符串）出现在该新图表的图例中。这样，用户始终知道他们刚刚点击了什么价值/类别。

图例的第二部分是我希望图表上所有值的聚合计数显示在某处。因此，如果我有一个值为10,15,25的图表，我希望能够在图表上的图例中显示50。

Answer 1

我很满意你正在使用这个：http://bl.ocks.org/mbostock/1283663

首先添加文字：

  var parent = svg.append("text").attr("x",-margin.left).attr("y",0)

在向下功能上更新文字：

  parent.text("Position:"+d.name+" Value:"+d.value)

和向上功能：

  parent.text("Position:"+d.parent.name+" Value:"+d.parent.value)

这里是working code

如果您不想显示根目录：

向下功能：

  if (d.name == "flare") {
    parent.text("")
  } else {
  parent.text("Position:"+d.name+" Value:"+d.value)  
  }

向上功能：

  if (d.parent.name == "flare") {
    parent.text("")
  } else {
  parent.text("Position:"+d.name+" Value:"+d.parent.value)  
  }

要在每个名称栏后显示值，请调整功能栏（d）：

  bar.append("text")
      .attr("x", -6)
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d.name+" : "+d.value; }); // <-- Here made mods

将图例添加到D3中的hierchical条形图

1 个答案: