D3.js 添加图裂
时间: 2023-08-12 09:03:57 浏览: 43
如果您想在 D3.js 中添加图例,可以使用 D3.js 的图例模块。以下是一个基本示例:
```javascript
var svg = d3.select("svg");
var data = [
{label: "Apples", value: 20},
{label: "Oranges", value: 10},
{label: "Bananas", value: 15},
{label: "Grapes", value: 5},
];
var color = d3.scaleOrdinal()
.domain(data.map(function(d) { return d.label; }))
.range(d3.schemeCategory10);
var legend = svg.selectAll(".legend")
.data(data)
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d) { return color(d.label); });
legend.append("text")
.attr("x", 40)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d.label; });
```
在这个例子中,我们创建了一个包含标签和值的数据数组。我们使用 `d3.scaleOrdinal()` 函数来创建一个颜色比例尺,并使用 `.range()` 方法指定颜色范围。然后,我们使用 `selectAll()` 方法选择所有的图例元素,使用 `data()` 方法将数据绑定到选择集上,使用 `enter()` 方法创建新元素,然后使用 `append()` 方法添加 `rect` 和 `text` 元素。最后,我们使用 `.style()` 方法设置 `rect` 元素的填充色,使用 `.text()` 方法设置 `text` 元素的文本内容。
您可以根据需要修改此代码以适应您的数据和样式。