d3.js 图中圆圈的随机颜色

Posted 2023-02-22

【中文标题】d3.js 图中圆圈的随机颜色

【英文标题】：random colors for circles in d3.js graph

【发布时间】：2012-11-13 20:21:50

【问题描述】：

这里是 jsfiddle 的链接

http://jsfiddle.net/jaimem/RPGPL/2/

现在图表显示所有圆圈的颜色为红色。这是一种在圆圈上显示随机颜色的方法。

这里是 d3.js 代码

 var data = [ "count": "202", "year": "1590",
                   "count": "215", "year": "1592",
                   "count": "179", "year": "1593", 
                   "count": "199", "year": "1594",
                   "count": "134", "year": "1595",
                   "count": "176", "year": "1596",
                   "count": "172", "year": "1597",
                   "count": "161", "year": "1598",
                   "count": "199", "year": "1599",
                   "count": "181", "year": "1600",
                   "count": "157", "year": "1602",
                   "count": "179", "year": "1603",
                   "count": "150", "year": "1606",
                   "count": "187", "year": "1607",
                   "count": "133", "year": "1608",
                   "count": "190", "year": "1609",
                   "count": "175", "year": "1610",
                   "count": "91", "year": "1611",
                   "count": "150", "year": "1612" ];



function ShowGraph(data) 
d3.selectAll('.axis').remove();
var vis = d3.select("#visualisation").append('svg'),
    WIDTH = 500,
    HEIGHT = 500,
    MARGINS = 
        top: 20,
        right: 20,
        bottom: 20,
        left: 30
    ,
                xRange = d3.scale
                       .linear()
                       .domain([
                          d3.min(data, function(d) return parseInt(d.year, 10);),
                          d3.max(data, function(d) return parseInt(d.year, 10);)
                        ])
                       .range([MARGINS.left, WIDTH - MARGINS.right]),
            yRange = d3.scale
                       .linear()
                       .domain([
                          d3.min(data, function(d) return parseInt(d.count, 10);),
                          d3.max(data, function(d) return parseInt(d.count, 10);)
                        ])
                       .range([HEIGHT - MARGINS.top, MARGINS.bottom]),

    xAxis = d3.svg.axis() // generate an axis
    .scale(xRange) // set the range of the axis
    .tickSize(5) // height of the ticks
    .tickSubdivide(true), // display ticks between text labels
    yAxis = d3.svg.axis() // generate an axis
    .scale(yRange) // set the range of the axis
    .tickSize(5) // width of the ticks
    .orient("left") // have the text labels on the left hand side
    .tickSubdivide(true); // display ticks between text labels
var transition = vis.transition().duration(1000).ease("exp-in-out");

transition.select(".x.axis").call(xAxis);
transition.select(".y.axis").call(yAxis);




vis.append("svg:g") // add a container for the axis
.attr("class", "x axis") // add some classes so we can style it
.attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") // move it into position
.call(xAxis); // finally, add the axis to the visualisation

vis.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);


var circles = vis.selectAll("circle").data(data)
circles.enter()
    .append("svg:circle")
    .attr("cx", function (d) 
    return xRange(d.year);
)
    .attr("cy", function (d) 
    return yRange(d.count);
)
    .style("fill", "red")

circles.transition().duration(1000)
    .attr("cx", function (d) 
    return xRange(d.year);
)
    .attr("cy", function (d) 
    return yRange(d.count);
)
    .attr("r", 10)

circles.exit()
    .transition().duration(1000)
    .attr("r", 10)
    .remove();

【参考方案1】：

你也可以使用 d3.scale.category20();获取一些预定义的随机颜色

只需将色阶定义为

 var color = d3.scale.category20();

为圆圈添加填充属性

 .attr("fill",function(d,i)return color(i););

【讨论】：

d3.scale.category20();仅包含 20 种颜色。

这不适用于var color = d3.scaleOrdinal(d3.schemeCategory20); attr("fill",function(d,i)return color(i););

【参考方案2】：

将.style("fill","red")替换为

.style("fill",function() 
    return "hsl(" + Math.random() * 360 + ",100%,50%)";
    )

doc for dynamic properties

【参考方案3】：

对于随机颜色的快速和肮脏的方法：

 const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

d3.select("body").selectAll("div")
      .data(dataset)
      .enter()
      .append("div")
      .attr("class", "bar")
      .style('height',(data) =>  return data+'px' )
      .style('background-color',() => 
        let color = '#'+Math.floor(Math.random() * Math.pow(2,32) ^ 0xffffff).toString(16).substr(-6);
        console.log(color);
      	return color;
      )

 .bar 
    width: 25px;
    height: 100px;
    display: inline-block;
 

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.js"></script>

【参考方案4】：

可能是 Chumliu 的答案是第一种方法，但它有一个错误：它会重复颜色并在阅读图形时造成混淆。

这样你就有不同的颜色：

var colors = [];
var arr    = [];
var j;

products.forEach(function(d) 

    do
    
        j = Math.random();
    
    while($.inArray(j,arr) != -1);
    arr.push(j);

    //this gives us different values
    var value = parseFloat(d.category_id) + parseFloat(d.total); 
    eval('colors.cat'+d.category_id+' = "hsl('+ parseFloat('0.'+ value ) * 360 + ',100%,50%)"');

稍后你可以像这样在 D3 中使用它：

g.append("path").style("fill", function(d) 
 
    var indexcolor = 'cat'+d.data.category_id; return colors[indexcolor]; 
);