从 json 数据名称属性将 Y 轴标签添加到 D3 条

Posted 2023-02-22

【中文标题】从 json 数据名称属性将 Y 轴标签添加到 D3 条

【英文标题】：add Y axis labels to D3 bar from json data name attribute

【发布时间】：2014-01-08 05:22:00

【问题描述】：

我正在关注Let's make a Bar chart 教程并且遇到了一个问题...在第三步中他将条形旋转到列，对于我的生活，我无法弄清楚如何迭代 json 数据集，并且从返回的 json 数据中的 name 属性为每个条添加 Y 轴标签

这是我的代码http://jsfiddle.net/7K3tt的jsfiddle

以及下面的代码示例 加载的json数据

[
    
        "name": "1-30 days",
        "value": "22"
    ,
    
        "name": "31-60 days",
        "value": "14"
    ,
    
        "name": "61-90 days",
        "value": "1"
    
]

我的 D3 代码

var width = 420,
    barHeight = 20;

var x = d3.scale.linear()
    .range([0, width]);

var chart = d3.select(".chart")
    .attr("width", width);


d3.json("<?=APP_PATH?>/query", function(error, data) 
  x.domain([0, d3.max(data, function(d)  return d.value; )]);


  chart.attr("height", barHeight * data.length);

  var bar = chart.selectAll("g")
      .data(data)
    .enter().append("g")
      .attr("transform", function(d, i)  return "translate(0," + i * barHeight + ")"; );

  bar.append("rect")
      .attr("width", function(d)  return x(d.value); )
      .attr("height", barHeight - 1);

  bar.append("text")
      .attr("x", function(d)  return x(d.value) - 3; )
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .text(function(d)  return d.value; );
);

function type(d) 
  d.value = +d.value; // coerce to number
  return d;

【问题讨论】：

我不确定问题是什么。您想旋转到目前为止的内容，将标签保留在每个栏的顶部？

不，我希望 name 属性沿 y 轴显示在栏旁边，就像这样 mbostock.github.io/d3/talk/20111116/bar-hierarchy.html

d3 axis labeling的可能重复

我不认为它与***.com/questions/11189284/d3-axis-labeling 重复，因为我在问如何迭代结果集并动态添加标签，而不是静态添加标签...我更新了我的问题以更清楚我的意图

【参考方案1】：

我不确定您将条形旋转到列是什么意思，但您所要做的就是使用现有选择添加另一组 text 元素：

bar.append("text")
  .attr("x", 0)
  .attr("y", barHeight / 2)
  .attr("dy", ".35em")
  .attr("dx", "-1em")
  .style("fill", "black")
  .text(function(d)  return d.name; );

完整示例here。我还移动了条形，以便为新标签留出空间。

【讨论】：

你已经剪掉了最后一个小节，它应该是这样的 - jsfiddle.net/7K3tt/3

谢谢您，完美...现在您是通过文档了解到这一点的吗？不知道我应该在哪里提高我的 D3 知识

看看教程。最终，您只需要通过使用它来获得经验。