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

Question

这是 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();
}

Answer 1

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

只需将色标定义为

 var color = d3.scale.category20();

为圆圈添加填充属性

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