首页 文章

颜色比例在D3 / JavaScript中无法正常工作[重复]

提问于
浏览 次
0

这个问题在这里已有答案：

我使用色标：

var color = d3.scale.category10();

我使用它根据它们的值为力布局图的边缘着色

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

现在我需要一个'图例'来向用户显示每种颜色的含义：

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'rects'时，我附加到SVG，就好像颜色标度数组的前6种颜色在应用到边缘时用完了，当我从颜色开始执行for循环时（ 0）它实际上给我颜色的颜色（5）（因为0是第一个） .

例如，说我有红色，蓝色，绿色，白色，黑色，粉红色，橙色，黄色，靛蓝色，浅绿色 . 我的边缘得到 - 红色，蓝色，绿色，白色，黑色，粉红色，现在当我想将比例应用于我制作的镜片时，我希望镜片具有相同的值 - 红色，蓝色，绿色，白色，黑色，粉 .

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

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

javascript svg d3.js

2 回答

  • 0

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

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

    svg.append('rect')
   .style("fill", color(data.edges[i].label))
    回复于
  • 0

    这个问题对我有帮助 -

    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
    回复于

相关问题