javascript - d3 图表的数据未从 json 绑定(bind)

Question

您好，我正在使用 D3 图表。

我正在使用这个 d3 图表:http://bl.ocks.org/diethardsteiner/3287802

在此图表中，所有数据都是从变量读取的。我想从json文件中读取数据。

我已经完成了一半的工作。我做了同样的事情来完成另一半的工作，但它不起作用。

饼图是从json读取数据。但条形图并不是从json读取数据。

这里我创建了 Plunker 检查这一点并给出一些解决方案。 https://plnkr.co/edit/TaXMsUWuIXe5kv3yzazk?p=preview

这里我尝试读取的数据不是从 json 读取的。

我想像这个例子一样运行这个图表:http://bl.ocks.org/diethardsteiner/3287802

i tried like this

d3.json("data1.json", function(datasetBarChart){

debugger;
// set initial group value
var group = "All";

function datasetBarChosen(group) {
    var ds = [];
    for (x in datasetBarChart) {
         if(datasetBarChart[x].group==group){
            ds.push(datasetBarChart[x]);
         } 
        }
    return ds;
}


function dsBarChartBasics() {
debugger;
        var margin = {top: 30, right: 5, bottom: 20, left: 50},
        width = 500 - margin.left - margin.right,
       height = 250 - margin.top - margin.bottom,
        colorBar = d3.scale.category20(),
        barPadding = 1
        ;

        return {
            margin : margin, 
            width : width, 
            height : height, 
            colorBar : colorBar, 
            barPadding : barPadding
        }           
        ;
}

function dsBarChart() {
debugger;
    var firstDatasetBarChart = datasetBarChosen(group);             

    var basics = dsBarChartBasics();

    var margin = basics.margin,
        width = basics.width,
       height = basics.height,
        colorBar = basics.colorBar,
        barPadding = basics.barPadding
        ;

    var     xScale = d3.scale.linear()
                        .domain([0, firstDatasetBarChart.length])
                        .range([0, width])
                        ;

    var yScale = d3.scale.linear()

           .domain([0, d3.max(firstDatasetBarChart, function(d) { return d.measure; })])

           .range([height, 0])
           ;

    //Create SVG element

    var svg = d3.select("#barChart")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("id","barChartPlot")
            ;

    var plot = svg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            ;

    plot.selectAll("rect")
           .data(firstDatasetBarChart)
           .enter()
           .append("rect")
            .attr("x", function(d, i) {
                return xScale(i);
            })
           .attr("width", width / firstDatasetBarChart.length - barPadding)   
            .attr("y", function(d) {
                return yScale(d.measure);
            })  
            .attr("height", function(d) {
                return height-yScale(d.measure);
            })
            .attr("fill", "lightgrey")
            ;


    // Add y labels to plot 

    plot.selectAll("text")
    .data(firstDatasetBarChart)
    .enter()
    .append("text")
    .text(function(d) {
            return formatAsInteger(d3.round(d.measure));
    })
    .attr("text-anchor", "middle")

    .attr("x", function(d, i) {
            return (i * (width / firstDatasetBarChart.length)) + ((width / firstDatasetBarChart.length - barPadding) / 2);
    })
    .attr("y", function(d) {
            return yScale(d.measure) + 14;
    })
    .attr("class", "yAxis")


    var xLabels = svg
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + (margin.top + height)  + ")")
            ;
    debugger;
    xLabels.selectAll("text.xAxis")
          .data(firstDatasetBarChart)
          .enter()
          .append("text")
          .text(function(d) { return d.category;})
          .attr("text-anchor", "middle")
            // Set x position to the left edge of each bar plus half the bar width
                           .attr("x", function(d, i) {
                                return (i * (width / firstDatasetBarChart.length)) + ((width / firstDatasetBarChart.length - barPadding) / 2);
                           })
          .attr("y", 15)
          .attr("class", "xAxis")
          //.attr("style", "font-size: 12; font-family: Helvetica, sans-serif")
          ;         

    // Title

    svg.append("text")
        .attr("x", (width + margin.left + margin.right)/2)
        .attr("y", 15)
        .attr("class","title")              
        .attr("text-anchor", "middle")
        .text("Elevator Trips by Material Stream and Destination")
        ;
}

dsBarChart();

 /* ** UPDATE CHART ** */

/* updates bar chart on request */

function updateBarChart(group, colorChosen) {
    debugger;
        var currentDatasetBarChart = datasetBarChosen(group);

        var basics = dsBarChartBasics();

        var margin = basics.margin,
            width = basics.width,
           height = basics.height,
            colorBar = basics.colorBar,
            barPadding = basics.barPadding
            ;

        var     xScale = d3.scale.linear()
            .domain([0, currentDatasetBarChart.length])
            .range([0, width])
            ;


        var yScale = d3.scale.linear()
          .domain([0, d3.max(currentDatasetBarChart, function(d) { return d.measure; })])
          .range([height,0])
          ;

       var svg = d3.select("#barChart svg");

       var plot = d3.select("#barChartPlot")
        .datum(currentDatasetBarChart)
           ;

            /* Note that here we only have to select the elements - no more appending! */
        plot.selectAll("rect")
          .data(currentDatasetBarChart)
          .transition()
            .duration(750)
            .attr("x", function(d, i) {
                return xScale(i);
            })
           .attr("width", width / currentDatasetBarChart.length - barPadding)   
            .attr("y", function(d) {
                return yScale(d.measure);
            })  
            .attr("height", function(d) {
                return height-yScale(d.measure);
            })
            .attr("fill", colorChosen)
            ;

        plot.selectAll("text.yAxis") // target the text element(s) which has a yAxis class defined
            .data(currentDatasetBarChart)
            .transition()
            .duration(750)
           .attr("text-anchor", "middle")
           .attr("x", function(d, i) {
                return (i * (width / currentDatasetBarChart.length)) + ((width / currentDatasetBarChart.length - barPadding) / 2);
           })
           .attr("y", function(d) {
                return yScale(d.measure) + 14;
           })
           .text(function(d) {
                return formatAsInteger(d3.round(d.measure));
           })
           .attr("class", "yAxis")                   
        ;


        svg.selectAll("text.title") // target the text element(s) which has a title class defined
            .attr("x", (width + margin.left + margin.right)/2)
            .attr("y", 15)
            .attr("class","title")              
            .attr("text-anchor", "middle")
            .text(group + "'s Elevator Trips by Material Stream and Destination")
        ;
}
});

谢谢

Answer 1

您使用了错误的d3.json回调签名。回调的第一个参数是发生的错误，如果没有发生错误则为 null，第二个参数是返回的数据。因此，您应该使用以下内容:

d3.json("data1.json", function(error, data){
  if(error) {
    // handle error
  } else {
    // work with the data array
  }
}

以下代码片段演示了从外部 JSON 存储加载数据集。加载数据后，数据将被传递到绘制上述饼图的 dsPieChart 函数。

d3.select(window).on('load', function() {
  // Loading data from external JSON source
  d3.json('https://api.myjson.com/bins/1hewit', function(error, json) {
    if (error) {
      throw new Error('An error occurs');
    } else {
      dsPieChart(json);
    }
  });
});


// Format options
var formatAsPercentage = d3.format("%"),
  formatAsPercentage1Dec = d3.format(".1%"),
  formatAsInteger = d3.format(","),
  fsec = d3.timeFormat("%S s"),
  fmin = d3.timeFormat("%M m"),
  fhou = d3.timeFormat("%H h"),
  fwee = d3.timeFormat("%a"),
  fdat = d3.timeFormat("%d d"),
  fmon = d3.timeFormat("%b");

// PIE CHART drawing
function dsPieChart(dataset) {

  var width = 400,
    height = 400,
    outerRadius = Math.min(width, height) / 2,
    innerRadius = outerRadius * .999,
    innerRadiusFinal = outerRadius * .5,
    innerRadiusFinal3 = outerRadius * .45,
    color = d3.scaleOrdinal(d3.schemeCategory20);

  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.arc()
    .outerRadius(outerRadius).innerRadius(innerRadius);

  var arcFinal = d3.arc().innerRadius(innerRadiusFinal).outerRadius(outerRadius);
  var arcFinal3 = d3.arc().innerRadius(innerRadiusFinal3).outerRadius(outerRadius);

  var pie = d3.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;
  }

  vis.append("svg:text")
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")
    .text("Revenue Share 2012")
    .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));
  }
}

#pieChart {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 400px;
  height: 400px;
}

.slice {
  font-size: 12pt;
  font-family: Verdana;
  fill: white;
  font-weight: bold;
}

.title {
  font-family: Verdana;
  font-size: 15px;
}

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="pieChart"></div>

另请参阅Bar chart from external JSON file示例。