Question

我这里有一个傻瓜 - https://plnkr.co/edit/inW1NfaUwechJt8C1hC9?p=preview

我正在尝试为此图表创建图例

我可以通过将图例添加到svg来实现，但我喜欢更多地控制样式和位置

是否可以在单独的div元素中创建图例并使用类似ul列表的内容。

var legend = d3.select(".legend")
  .data(colors)
  .enter()
  .append("g")
  .attr("class", "legend")
  .attr("transform", (d, i) => {
    return "translate(20," + i * 35 + ")";
  });

Answer 1

是的，根据你的评论，似乎html列表方法就是你想要的，我会回答这个方法。

不是为每个图例项附加g，而是将li附加到列表中。您也可以将div和ul附加到d3，就像任何svg组件一样。唯一的主要变化是附加正确类型的元素并设置其相关属性 - 因为html与svg不同。

与svg组件一样，您可以使用css或.attr / .style方法设置样式（我在下面使用它们）。

以下是一个例子：

var data = [{"name":"Category 1", "value":1},{"name":"Category 2", "value":2},{"name":"Category 3", "value":3},{"name":"Category 4", "value":4},{"name":"Category 5", "value":5}];

var scale = d3.scaleLinear()
  .range(["red","orange"])
  .domain([1,5]);
  
var divLegend = d3.select("#divLegend");

divLegend.append("p")
    .html("Legend Title")
    .style("text-align","center")
    .style("font-size","20px")

var list = divLegend.append("ul");

var entries = list.selectAll("li")
  .data(data)
  .enter()
  .append("li");
  
  
// append rectangle and text:
entries.append("span")
  .attr("class","rect")
  .style("background-color", function(d) { return scale(d.value); })
  
entries.append("span")
  .attr("class","label")
  .html(function(d) { return d.name; })

ul {
  list-style-type: none;
}

.rect {
  width: 10px;
  height: 10px;
  display: inline-block;
}

.label {
  margin-left: 10px;
}

#divLegend {
  width: 150px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<div id="divLegend"></div>

D3 - 单独div元素中的图例

1 个答案: