zufällige Farben für Kreise in d3.js Graph

Question

Hier ist ein Link auf die jsfiddle

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

Nun ist die grafische Darstellung der roten Farbe für die ganze circles.Is Dere zeigt eine Möglichkeit, zufällige Farben auf die Kreise zu zeigen. Hier

ist der d3.js Code

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

Sie auch d3.scale.category20 verwenden können(); einige vordefinierte zufällige Farben

Gerade Farbskala als

var color = d3.scale.category20(); 

add fill Attribut zu den Kreisen als

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

Answer 2

ersetzen .style("fill","red") mit

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

doc for dynamic properties

Answer 3

definieren die Chumliu Antwort ist der erste Ansatz zu bekommen, aber es hat ein Fehler: Es wird Farben wiederholen und Verwirrung beim Lesen der Grafiken verursachen.

Wie diese Weise haben Sie verschiedene Farben:

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

später Sie es in D3 wie diese verwenden:

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