Question

我使用色标：

var color = d3.scale.category10();

我使用它来根据力值

为力布局图的边缘着色

var links = inner.selectAll("line.link")
    .style("stroke", function(d) { return color(d.label); });

现在我需要一个传奇＆＃39;向用户显示每种颜色的含义：

    edgesArray = [];
    edgesArrayIndex = [];
    for (i=0;i<data.edges.length;i++) {
    if(!edgesArray[data.edges[i].name])
    {
    edgesArray[data.edges[i].name]=1;
    edgesArrayIndex.push(data.edges[i].name);       
    }
}

var colourWidth = 160;
var colourHeight = 25;

for(i=0; i<edgesArrayIndex.length; i++){

if (edgeColour == true){    
svg.append('rect')
    .attr("width",  colourWidth)
    .attr("height", colourHeight)
    .attr("x", Marg*2)
    .attr("y", Marg*2 + [i]*colourHeight)   
    .style("fill", color(i))
    ;
svg.append("text")  
    .attr("x", Marg*3)
    .attr("y", Marg*2 + [i]*colourHeight + colourHeight/2)
    .attr("dy", ".35em")
    .text(color(i) + " : " + data.edges[i].name); 
}
//console.log(edgesArrayIndex);
}

颜色都错了。当我将颜色附加到图形时，前6种颜色附着在边缘上，因为有6种不同类型的边缘。

但是，当我将色标应用于6＆＃39;我在SVG上附加了它，好像颜色比例数组的前6种颜色在应用到边缘时用完了，当我从颜色（0）开始执行for循环时它实际上给了我颜色的颜色（5）（首先是0）。

例如，说我有红色，蓝色，绿色，白色，黑色，粉红色，橙色，黄色，靛蓝色，浅绿色。我的边缘 - 红色，蓝色，绿色，白色，黑色，粉红色现在，当我想将比例应用于我所制作的作品时，我希望这些作品具有相同的值 - 红色，蓝色，绿色，白色，黑色，粉红色。

但它们实际上有：橙色，黄色，靛蓝色，浅绿色，红色，蓝色。

它们从颜色[5]开始，就好像它们绕回到开头并回到红色，蓝色等等。

Answer 1

您使用两个不同的数据部分作为色标 - 首先是标签，然后是名称。根据定义，这将为您提供不同的颜色（不同的输入在给定输出范围的情况下尽可能映射到不同的输出）。

要获得相同的颜色，请传入相同的属性，例如标签（如果我理解你的数据结构正确）：

svg.append('rect')
   .style("fill", color(data.edges[i].label))

Answer 2

这个问题帮助了我 -

d3.scale.category10() not behaving as expected

基本上你必须在规模上放置一个域名。而不是

var color = d3.scale.category10();

将其更改为：

var color = d3.scale.category10().domain([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);//-colour scale

颜色比例在D3 / JavaScript中无法正常工作

2 个答案: