couleurs aléatoires pour les cercles dans le graphique d3.js

Voici un lien vers le jsfiddle

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

Maintenant le montre le graphique couleur rouge pour tous les cercles.Est dere une façon de montrer couleurs aléatoires sur les cercles.

Ici est la 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();
}

source d'informationauteur iJade

  1. 38

    vous pouvez également utiliser d3.l'échelle.category20(); pour obtenir quelques modes de couleurs aléatoires

    Il suffit de définir une échelle de couleurs comme

     var color = d3.scale.category20();

    Ajouter ajouter un fond d'attribut pour les cercles en 

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

    remplacer .style("fill","red") avec

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

    doc pour les propriétés dynamiques

  3. 0

    Peut être le Chumliu réponse est dans la première approche, mais il a un défaut: il répétera les couleurs et faire une confusion pour le moment de lire le graphique.

    Comme cette façon, vous avez différentes couleurs:

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

    plus tard, vous pouvez l'utiliser en D3 comme ceci: 

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