Question

尝试从JSON文件中获取数据并将其插入另一个函数时，如何避免以下错误

这是我的代码：

＆＃13;

        <script src="http://d3js.org/d3.v3.min.js"></script>

        <div class="rate-chart"></div>
        <script>

        var margin = {top: 20, right: 20, bottom: 50, left: 70},
            width = 960 - margin.left - margin.right,
            height = 500 - margin.top - margin.bottom;

        (function() {
          console.log("qwerrrr");

          d3.json("data.php", function(error, data) {
            if (error) throw error;
            console.log("qwerrrr");
            console.log(data);
            data.forEach(function(d) {
              d.label = d.label;
              d.rate = +d.rate;
              d.count=+d.count;
            });


      rateChart = function(config, el) {

          config.barColor = '#0070D2';
          config.barHeight = 20;
          config.margin = {
              top: 20,
              right: 20,
              bottom: 50,
              left: 70
          };
          config.width = 960 - margin.left - margin.right,
          config. height = 500 - margin.top - margin.bottom;
 
          var x = d3.scale.ordinal().domain([0, 2])
              .rangeRoundBands([0, config.width]);

          var chartContainer = d3.select(el)
              .append('svg')
              .attr('width', config.width + config.margin.left + config.margin.right)
              .attr('height', config.height + config.margin.top + config.margin.bottom)
          var chart = chartContainer
              .append('g')
              .attr("transform", "translate(" + config.margin.left + "," + config.margin.top + ")");

     

          var rateRectsGroup = chart.selectAll('g.rates')
              .data(config.data).enter()
              .append('g')
              .attr('class', 'rates')
              .attr("transform", function(d, i) {
                  var xPos,
                      yPos = ((config.barHeight * i) * 2);
                  xPos = 0;
                  return "translate(" + xPos + "," + yPos + ")";
              });

          var rateRectsFull = rateRectsGroup.append('rect')
              .attr('height', config.barHeight)
              .attr('width', config.width)
              .attr('class', 'compare-bar')
              .attr('fill', '#F4F6F9')
              .attr("transform", 'translate(0, 0)');

          var rateRects = rateRectsGroup.append('rect')
              .attr('height', config.barHeight)
              .attr('width', function(d) {
                  return (config.width * d.rate)
              })
              .style('fill', config.barColor)
              .attr("transform", function(d) {
                  return 'translate(' + (config.width - (config.width * d.rate)) / 2 + ', 0)';
              });

          var rateRectsLabel = rateRectsGroup.append('text')
              .attr('text-anchor', 'middle')
              .attr('class', 'category-value')
              .attr('transform', 'translate('+config.width/2+', 0)')
              .append('tspan')
              .attr('dy', '1em')
              .text(function(d) {
                  return d.count;
              });

          var categoryLabels = chartContainer.append('g')
              .selectAll('text.bar-text')
              .data(config.data).enter()
              .append('text')
              .attr('class', 'bar-text')
              .attr('text-anchor', 'end')
              .attr("transform", function(d, i) {
                  var xPos = config.margin.left +1,
                        yPos = ((config.barHeight * i+10) * 2);
                  return "translate(" + xPos + "," + yPos + ")";
              })
              .append('tspan')
              .attr('dy', '1.3em')
              .text(function(d) {
                  return d.label
              });

      }

  rateChart(data, '.rate-chart');

});
}());

＆＃13;

.rate-chart .middle-line {
        stroke: black;
        stroke-width: 2px;
      }
      .rate-chart .target {
      stroke: black;
      stroke-width: 1px;
      }
      .rate-chart .target-text {
        fill: #666;
        font-family: sans-serif;
        font-size: 11px;
        font-weight: bold;
      }
      .rate-chart .rate-value {
        fill: white;
        font-size: 11px;
        font-weight: bold;
        font-family: sans-serif;
      }
      .rate-chart .rate-value-container {
        fill: rgba(0, 0, 0, .25);
      }
      .rate-chart .rate-label {
        fill: black;
        font-size: 11px;
        font-family: sans-serif;
        font-weight: bold;
      }
      .rate-chart .bar-text {
        font-family: sans-serif;
        font-size: 11px;
        font-weight: bold;
        text-transform: uppercase;
        fill: black;
      }
      .category-value {
        font-weight: bold;
        text-transform: uppercase;
        fill: black;
      }

＆＃13;

数据来自data.php文件，其中包含json输出。当我尝试运行代码时，我收到错误

未捕获的TypeError：无法读取属性＆＃39;长度＆＃39;未定义的

我正在使用此代码with this reference ，我需要在参考

中使用类似的图表

data.php输出

[{
 "label":"Signup",
 "rate": ".88",
 "count": "1000"
}, 
{
"label":"Login",
"rate": ".75",
"count": "500"
}, 
{
"label":"play",
"rate": ".25",
"count": "250"
}, 
{
"label":"repeat",
"rate": ".10",
"count": "120"
},
 {
"label":"album",
"rate": ".08",
"count": "100"
},
{
"label":"button",
"rate": ".05",
"count": "80"
},
{
"label":"qwert",
"rate": ".04",
"count": "752"
},
{
"label":"sdsdsd",
"rate": ".04",
"count": "75"
}]

Answer 1

数据

d3.json("data.php", function(error, data) {
    if (error) throw error;
    console.log("qwerrrr");
    console.log(data);
    data.forEach(function(d) {
      d.label = d.label;
      d.rate = +d.rate;
      d.count=+d.count;
    });

所以

var data = [{label:xxx,rate:xxx,count:xxx},...] 


rateChart(data, '.rate-chart');

你的功能

rateChart = function(config, el) {
config.barColor = '#0070D2';
          config.barHeight = 20;
          config.margin = {}
}

基本数据==配置它不是你不能做的对象config.xxx

什么是config.data？

试试这个

rateChart(data,{}, '.rate-chart');

rateChart = function(data,config, el) {
config.data = data
....
}

无法读取d3js

1 个答案: