D3 仪表板图表数据从 JSON 或 CSV 绑定

Question

我是D3图表的新手

我正在使用D3仪表板图表以下链接

http://bl.ocks.org/diethardsteiner/3287802

这里的数据由变量给出。

我不想从变量中获取值，而是想从 json 文件中获取值。

在

数据存储在变量中之前。

################ FORMATS ##################
-------------------------------------------
*/

var     formatAsPercentage = d3.format("%"),
        formatAsPercentage1Dec = d3.format(".1%"),
        formatAsInteger = d3.format(","),
        fsec = d3.time.format("%S s"),
        fmin = d3.time.format("%M m"),
        fhou = d3.time.format("%H h"),
        fwee = d3.time.format("%a"),
        fdat = d3.time.format("%d d"),
        fmon = d3.time.format("%b")
        ;
/*
############# PIE CHART ###################
-------------------------------------------
*/

function dsPieChart(){
    var dataset = [
            {category: "ACC", measure: 0.30},
          {category: "B56", measure: 0.25},
          {category: "MAB", measure: 0.15},
          ]
          ;
    var     width = 400,
           height = 400,
           outerRadius = Math.min(width, height) / 2,
           innerRadius = outerRadius * .999,   
           innerRadiusFinal = outerRadius * .5,
           innerRadiusFinal3 = outerRadius* .45,
           color = d3.scale.category20()    
           ;
    var vis = d3.select("#pieChart")
         .append("svg:svg")             
         .data([dataset])                  
             .attr("width", width)           
             .attr("height", height)
                .append("svg:g")                
             .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")
                ;
   var arc = d3.svg.arc()             
            .outerRadius(outerRadius).innerRadius(innerRadius);

   var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
    var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
   var pie = d3.layout.pie()          
        .value(function(d) { return d.measure; });    
   var arcs = vis.selectAll("g.slice")     
        .data(pie)                          
        .enter()                           
            .append("svg:g")                
               .attr("class", "slice")   
               .on("mouseover", mouseover)
                    .on("mouseout", mouseout)
                    .on("click", up)
                    ;
        arcs.append("svg:path")
               .attr("fill", function(d, i) { return color(i); } )
               .attr("d", arc)    
                    .append("svg:title") 
                   .text(function(d) { return d.data.category + ": " + formatAsPercentage(d.data.measure); });          
        d3.selectAll("g.slice").selectAll("path").transition()
                .duration(750)
                .delay(10)
                .attr("d", arcFinal )
                ;
      arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; })
            .append("svg:text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; })
          .text(function(d) { return d.data.category; })
          ;
        function angle(d) {
            var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
            return a > 90 ? a - 180 : a;
        }

        // Pie chart title          
        vis.append("svg:text")
            .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text("Building")
          .attr("class","title")
          ;         

    function mouseover() {
      d3.select(this).select("path").transition()
          .duration(750)
                    .attr("d", arcFinal3)
                    ;
    }
    function mouseout() {
      d3.select(this).select("path").transition()
          .duration(750)
                    .attr("d", arcFinal)
                    ;
    }
    function up(d, i) {

                updateBarChart(d.data.category, color(i));
                updateLineChart(d.data.category, color(i));
    }
}
dsPieChart();

现在我正在尝试通过以下方式获取数据。

我不知道这是正确的方法，谁能帮助我

################ FORMATS ##################
-------------------------------------------
*/

var     formatAsPercentage = d3.format("%"),
        formatAsPercentage1Dec = d3.format(".1%"),
        formatAsInteger = d3.format(","),
        fsec = d3.time.format("%S s"),
        fmin = d3.time.format("%M m"),
        fhou = d3.time.format("%H h"),
        fwee = d3.time.format("%a"),
        fdat = d3.time.format("%d d"),
        fmon = d3.time.format("%b")
        ;
/*
############# PIE CHART ###################
-------------------------------------------
*/

function dsPieChart(){

    var     width = 400,
           height = 400,
           outerRadius = Math.min(width, height) / 2,
           innerRadius = outerRadius * .999,   
           // for animation
           innerRadiusFinal = outerRadius * .5,
           innerRadiusFinal3 = outerRadius* .45,
           color = d3.scale.category20()    //builtin range of colors
           ;

});
    var vis = d3.select("#pieChart")
         .append("svg") 
        d3.json("readme.json", function(error, root) {
  if (error) throw error;
.data([root])                  
             .attr("width", width)           
             .attr("height", height)
                .append("g")            
             .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")    
})

                ;
   var arc = d3.svg.arc()            
            .outerRadius(outerRadius).innerRadius(innerRadius);

   var arcFinal = d3.svg.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
    var arcFinal3 = d3.svg.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);
   var pie = d3.layout.pie()        
        .value(function(d) { return d.measure; });   
   var arcs = vis.selectAll("g.slice")     
        .data(pie)                        
        .enter()                          
            .append("g")                
               .attr("class", "slice")   
               .on("mouseover", mouseover)
                    .on("mouseout", mouseout)
                    .on("click", up)
                    ;
        arcs.append("path")
               .attr("fill", function(d, i) { return color(i); } ) 
               .attr("d", arc)     
                    .append("title") 
                   .text(function(d) { return d.data.category + ": " + formatAsPercentage(d.data.measure); });          
        d3.selectAll("g.slice").selectAll("path").transition()
                .duration(750)
                .delay(10)
                .attr("d", arcFinal )
                ;

      arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; })
            .append("text")
          .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .attr("transform", function(d) { return "translate(" + arcFinal.centroid(d) + ")rotate(" + angle(d) + ")"; })
          .text(function(d) { return d.data.category; })
          ;

        function angle(d) {
            var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
            return a > 90 ? a - 180 : a;
        }
        vis.append("text")
            .attr("dy", ".35em")
          .attr("text-anchor", "middle")
          .text("Building")
          .attr("class","title")
          ;         

    function mouseover() {
      d3.select(this).select("path").transition()
          .duration(750)
                    .attr("d", arcFinal3)
                    ;
    }
    function mouseout() {
      d3.select(this).select("path").transition()
          .duration(750)
                    .attr("d", arcFinal)
                    ;
    }
    function up(d, i) {

                updateBarChart(d.data.category, color(i));
                updateLineChart(d.data.category, color(i));
    }
}
dsPieChart();

任何人都可以给出正确的解决方案

谢谢

维诺斯

Answer 1

只需使用以下结构创建一个 JSON 文件：

[{
    "category": "ACC",
    "measure": 0.30
}, {
    "category": "B56",
    "measure": 0.25
}, {
    "category": "MAB",
    "measure": 0.15
}]

并使用d3.json：

d3.json("data.json", function(dataset){
    //code here
});

这里有一个显示它的 plunker：https://plnkr.co/edit/OUjPNY3W2aXXCSxvm4tZ?p=preview