D3.js 来自json或csv的D3仪表板图表数据绑定

我不熟悉D3图表

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

这里的数据由变量给出

我不想从变量中获取值，我想从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();

谁能给出正确的解决方案

谢谢

---

Vinoth

只需创建一个具有以下结构的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显示：

Stack Overflow不是一个代码编写服务，请展示您的努力，我们很乐意提供帮助。@AlexJohnson:我已经更新了我的问题，您能给出解决方案吗。@AlexJohnson:我已经在这里添加了代码。我试图从json中获取数据。我不知道这是否是从json获取数据的正确方法。你能帮我一个忙吗？嗨，杰拉尔多，我还有一个疑问：我正在按照你的方法把这个任务执行到另一个不起作用的任务上。你能给我一些建议我应该在哪里使用这个功能吗？你说的“它不起作用”是什么意思？这对我很有用：除此之外，不要在评论中提出更多的问题。如果这个答案适合您，请接受它，如果您还有其他问题，请发布另一个问题。我的要求是，如果我单击饼图，它会在条形图中显示一些数据，这些数据与我在上一个问题中提出的饼图相关。但是你只画饼图，我想从JSON中画两个图表的数据，前面的问题是什么？我对其他问题一无所知，我在回答这个问题，这个问题非常清楚：“我不想从变量中获取值，我想从json文件中获取值”。这是这里唯一的问题。请停止在评论中进一步提问。