Question

如何将此垂直图例转换为水平图例？

var legendDiv = d3.select("#legend");

var legendRow = legendDiv.selectAll("test")
    .data(data)
    .enter()
    .append("div")
    .style("margin-bottom", "2px");

legendRow.append("div")
    .html("&nbsp")
    .attr("class", "rect")
    .style("background-color", (d, i) => z(i));

legendRow.append("div")
    .html(d=>d);

Answer 1

我是编写此代码的人，您可以复制/粘贴（https://stackoverflow.com/a/42381613/5768908）。不幸的是，你忘记了粘贴CSS（这对于<divs>的样式很重要），使代码难以理解为试图提供答案的其他人。

如果你想并排显示它们，这是另一种选择：

var data = ["foo", "bar", "baz"];

var z = d3.scaleOrdinal(d3.schemeCategory20);

var legendDiv = d3.select("#legend");

var legendRow = legendDiv.selectAll("foo")
    .data(data)
    .enter()
    .append("div")

var legendRect = legendRow.append("div")
    .html("&nbsp")
    .attr("class", "rect")
    .style("background-color", (d, i) => z(i));

var legendText = legendRow.append("div")
    .attr("class", "text")
    .html(d => d);

.rect {
  min-width: 20px;
  height: 20px;
  float: left;
  margin-right: 5px;
}

.text {
  float: left;
  margin-right: 20px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="legend"></div>

如何将垂直图例转换为水平图例？

1 个答案: