Question

我试图使用d3js制作径向条形图，但我在使用数据模型方面遇到了一些麻烦。我有fiddle here显示我想要实现的目标。目前，条形图的大小是随机创建的，但我希望能够将自己的数据（1到6之间的值）提供到图表中，但是我无法理解d3js的数据模型/结构，所以帮助将不胜感激！

$(function(){
var $container = $('.chart-container'),
        τ = 2 * Math.PI,
        width = $container.width(),
        height = $container.height(),
        outerRadius = Math.min(width,height)/2.5,
        innerRadius = 10,
        fontSize = (Math.min(width,height)/4);

var dataset = {
  weeks: [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
};


var color = d3.scale.ordinal()    .range(['rgb(247,251,255)','rgb(222,235,247)','rgb(198,219,239)','rgb(158,202,225)','rgb(107,174,214)','rgb(66,146,198)','rgb(33,113,181)','rgb(8,81,156)','rgb(8,48,107)']);

var pie = d3.layout.pie()
    .sort(null);

var arc = d3.svg.arc();

var svg = d3.select('.chart-container').append("svg")
        .attr("width", '100%')
        .attr("height", '100%')
        .attr('viewBox','0 0 '+Math.min(width,height) +' '+Math.min(width,height) )
        .attr('preserveAspectRatio','xMinYMin')
        .append("g")
        .attr("transform", "translate(" + Math.min(width,height) / 2 + "," + Math.min(width,height) / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g").attr("class", "arc");

var path = gs.selectAll("path")
    .data(function(d) { return pie(d); })
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", function(d, i, j) { return arc.innerRadius(10).outerRadius(20*getRandomInt (1, 6))(d); });
});

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Answer 1

在此处更改数据集变量和颜色，只需预先填充所需的数组并将其注入D3。即d3.values(dataset)

var dataset = {
  weeks: [5,10]
};

var color = d3.scale.ordinal().range(['#ccc','#c33']);

使用d3js创建径向条形图的数据模型

1 个答案: