màu sắc ngẫu nhiên cho vòng tròn trong đồ thị dưới d3.js

Question

Dưới đây là một liên kết đến jsfiddle

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

Bây giờ đồ thị cho thấy màu đỏ cho tất cả các circles.Is dere một cách để hiển thị màu sắc ngẫu nhiên trên vòng tròn.

Đây là mã 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(); 
} 

Answer 1

bạn cũng có thể sử dụng d3.scale.category20(); để có được một số màu sắc ngẫu nhiên được xác định trước

Chỉ cần xác định quy mô màu như

var color = d3.scale.category20(); 

Add thêm thuộc tính điền để các vòng tròn như

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

Answer 2

thay .style("fill","red") với

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

doc for dynamic properties

Answer 3

Có thể là câu trả lời Chumliu là phương pháp đầu tiên, nhưng nó có một lỗi: nó sẽ lặp lại màu sắc và làm cho một sự nhầm lẫn cho khi đọc đồ họa.

Giống như cách này bạn có màu sắc khác nhau:

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%)"'); 
} 

sau đó bạn có thể sử dụng nó trong D3 như thế này:

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