d3.js中的单行传说

Question

下图显示了我希望d3图表中的图例项目如何。对于所有项目，所有项目应与一行对齐。

如何使用d3.js实现上述目标？ 我多次尝试不解决这个问题。我不能把所有项目放在一行。

Answer 1

在这里go。

刚刚更改了图例的x和y属性，它完成了工作。

var legend = svg.append("g")
  .attr("class", "legend")
  .attr("x", w)
  .attr("height", 50)
  .attr("width", 300)
  .attr("transform", "translate(" + (w - 200) + ", -50)");

删除y并使用transform并将图例放在右上角。

legend.selectAll('g').data(dataset)
  .enter()
  .append('g')
  .each(function(d, i) {
    var g = d3.select(this);
    g.append("rect")
      .attr("x", i * 60)
      .attr("y", 65)
      .attr("width", 10)
      .attr("height", 10)
      .style("fill", color_hash[String(i)][1]);

我在这里更改了x和y属性值以获得所需的值。

g.append("text")
      .attr("x", i * 60 + 15)
      .attr("y", 73)
      .attr("height",30)
      .attr("width",100)
      .style("fill", color_hash[String(i)][1])
      .text(color_hash[String(i)][0]);

最后用相同的逻辑修改文本以保持与图例图标的内联。

希望这会对你有所帮助。