点的颜色在 D3.js散点图上的 10 个数据集后重复
Colour of points repeat after 10 data sets on D3.js scatter plot
问题:我有一个 D3.js 散点图,它有 16 个不同的数据集,但似乎 D3 在重复之前只内置了 10 种不同的颜色。您可以通过单击该链接了解我的意思。
法典:
function updatePlot() {
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.sepalLength = +d.sepalLength;
d.sepalWidth = +d.sepalWidth;
});
x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("HPF/LPF Intensity Ratio");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("HPF Intensity (relative units)")
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.sepalWidth); })
.attr("cy", function(d) { return y(d.sepalLength); })
.style("fill", function(d) { return color(d.species); });
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
}
(代码几乎是从这里复制/粘贴的,在我理解的 D3 领域进行了一些自定义)
谢谢!
文档的这一部分有答案:序数尺度#分类颜色。感谢用户和Lars Kotthoff!
只是用category20
替换了category10
.
相关文章:
- 将工具提示添加到d3散点图中
- 具有多个数据集的分组散点图D3
- d3.js散点图中的刻度标签在Firefox 13.0.1中被截断
- 在D3散点图圆上添加标签
- 在NVD3散点图上绘制标签
- 高图表散点图:点击事件时的警报坐标
- 如何从javascript散点图中的另一个变量为x和y添加新值
- d3.js可以使用来自同一来源的数据在同一张图上绘制两个散点图吗
- 谷歌散点图-{role:'style'}{role:#39;工具提示'}不能以JSON形式工作
- 对散点图使用固定的颜色集
- 点的颜色在 D3.js散点图上的 10 个数据集后重复
- 将数据复制到 JavaScript D3 中的数组.js然后绘制散点图
- 利用数据生成散点图采用d3转换法
- 如何使用时间序列数据绘制高架图散点图
- D3更新数据集,点击并重新绘制条形图
- 将ds.js散点图绑定到JSON数据
- 根据d3js中的数据id在散点图中选择点
- ExtJS散点图,根据数据中的标志突出显示某些点
- D3 散点图突出显示与特定数据条件匹配的所有点
- 如何指示高图散点图打印所有数据标签