цвет заливки до г в д3 - PullRequest
Новая
       7

цвет заливки до г в д3

0 голосов
/ 17 апреля 2020

Я пытаюсь заполнить цвет в круговой диаграмме, но в браузере это не работает. Он может создать круговую диаграмму, но цвет не заполнен. Все работает хорошо, я только не могу заполнить цвет в круговой диаграмме. Любая помощь будет по достоинству оценена. Правка :: Я включил файл стиля. css вместе с данными. * Файл 1018 *.

p ie. js

//margin and radius
var margin = {top:20,right:20,bottom:20,left:20},
    width = 500-margin.right-margin.left,
    height = 500-margin.top-margin.bottom,
    radius = width/2;

//arc generator
var arc = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var labelArc= d3.arc()
    .outerRadius(radius-50)
    .innerRadius(radius-50);

//pie generator
var pie = d3.pie()
    .sort(null)
    .value(function(d){return d.count;});

//define svg
var svg = d3.select("body").append("svg")
    .attr("width",width)
    .attr("height",height)
    .append("g")
    .attr("transform","translate("+width/2+","+height/2+")");

d3.csv("data.csv").then(function(data) {
    data.forEach(function(d){
        d.count=+d.count;  //here count column for number of fruits in csv
        d.fruit=d.fruit;   //here fruit is name of fruit column in csv
    })
    var g = svg.selectAll(".arc")
        .data(pie(data))
        .enter().append("g")
        .attr("class","arc");
    //append path of the arc
    g.append("path")
        .attr("g",arc)
        .style('fill','blue');
    //appemd the text (labels)
    g.append("text")
        .attr("transform",function(d){return "translate("+labelArc.centroid(d)+")";})
        .attr("dy",".35em")
        .text(function(d) {return d.data.fruit;});
});

style. css

.arc text{
    font:12px sans-serif;
    text-anchor:middle;
}
.arc path{
    stroke: #008000;
}
.arc2 text{
    font:10px sans-serif;
    text-anchor:middle;
}
.arc2 path{
    stroke:#0000FF;
}

data.csv 

fruit,count
Apple,10
Strawberry,20
Banana,15
Blueberry,20
Kiwi,30
Plum,5
...