Question

我正在尝试将Json数据对象绑定到d3.js代码中，该代码创建条形图的方面（来自vida.io）

以下是Json数据：

 [
  {
    "chart_title": "Population",
    "unit": "billion",
    "India": 1.22,
    "China": 1.36
  },
  {
    "chart_title": "Popluation Grow Rate",
    "unit": "percentage",
    "India": 0.0131,
    "China": 0.0048
  },
  {
    "chart_title": "Tallest Building",
    "unit": "meter",
    "India": 833,
    "China": 1614
  },
  {
    "chart_title": "Sex Ratio",
    "unit": "",
    "India": 1.08,
    "China": 1.06
  },
  {
    "chart_title": "Literacy All Gender",
    "unit": "percentage",
    "India": 0.74,
    "China": 0.92
  },
  {
    "chart_title": "Literacy All Male",
    "unit": "percentage",
    "India": 0.82,
    "China": 0.96
  },
  {
    "chart_title": "Literacy All Female",
    "unit": "percentage",
    "India": 0.65,
    "China": 0.88
  },
  {
    "chart_title": "Area",
    "unit": "million square km",
    "India": 3.31,
    "China": 9.706
  },
  {
    "chart_title": "Area Land",
    "unit": "million square km",
    "India": 2.97,
    "China": 9.434
  },
  {
    "chart_title": "Area Water",
    "unit": "million square km",
    "India": 0.34,
    "China": 0.272
  },
  {
    "chart_title": "Infant Mortality",
    "unit": "per thousand",
    "India": 46.07,
    "China": 15.62
  }
]

我试图将数据定义为变量（value_var ,,,）但没有成功，尽管svg.data有一个value var参数。

以下是我正在使用的代码，不知道为什么它不起作用：

<!DOCTYPE html>
<html >
  <head>

       <title>D3 Page Template</title>
        <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   </head>
<style>
.chart div {
  font: 10px sans-serif;
  background-color: steelblue;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}
.bar {
  fill: #4682b4;
}

svg {
  border: none !important;
}

.chart-title {
  font-size: 18px;
  font-weight: bold;
}
</style>
     <body>
    <p>this is</p>
    <div id="canvas-svg"></div>

</div>
    <script>

 var value_data=[
  {
    "chart_title": "Population",
    "unit": "billion",
    "India": 1.22,
    "China": 1.36
  },
  {
    "chart_title": "Popluation Grow Rate",
    "unit": "percentage",
    "India": 0.0131,
    "China": 0.0048
  },
  {
    "chart_title": "Tallest Building",
    "unit": "meter",
    "India": 833,
    "China": 1614
  },
  {
    "chart_title": "Sex Ratio",
    "unit": "",
    "India": 1.08,
    "China": 1.06
  },
  {
    "chart_title": "Literacy All Gender",
    "unit": "percentage",
    "India": 0.74,
    "China": 0.92
  },
  {
    "chart_title": "Literacy All Male",
    "unit": "percentage",
    "India": 0.82,
    "China": 0.96
  },
  {
    "chart_title": "Literacy All Female",
    "unit": "percentage",
    "India": 0.65,
    "China": 0.88
  },
  {
    "chart_title": "Area",
    "unit": "million square km",
    "India": 3.31,
    "China": 9.706
  },
  {
    "chart_title": "Area Land",
    "unit": "million square km",
    "India": 2.97,
    "China": 9.434
  },
  {
    "chart_title": "Area Water",
    "unit": "million square km",
    "India": 0.34,
    "China": 0.272
  },
  {
    "chart_title": "Infant Mortality",
    "unit": "per thousand",
    "India": 46.07,
    "China": 15.62
  }
];

   /*--- IMPORTANT GUIDELINES ---
1. Use div #canvas-svg for svg rendering
    var svg = d3.select("#canvas-svg");
2. 'data' variable contains JSON data from Data tab
    Do NOT overwrite this variable 
3. To define customizable properties, use capitalized variable names,
    and define them in Properties tab ---*/

var WIDTH = 800;

var COLOR_1 = config.color1;

var COLOR_2 = config.color2;

var X_DATA_PARSE = vida.string;

var Y_DATA_PARSE = vida.number;

var Y_DATA_FORMAT = d3.format("");

var margin = {top: 70, right: 20, bottom: 30, left: 60},
    width = WIDTH - margin.left - margin.right,
    height = WIDTH - margin.top - margin.bottom;

var groups = [];

var makeBar = function(width, height, bar_data) {
  var Y_DATA_FORMAT = d3.format("");

  var Y_AXIS_LABEL = bar_data.unit;

  if (bar_data.unit === 'percentage') {
    Y_DATA_FORMAT = d3.format(".1%");
  }

  var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.1);

  var y = d3.scale.linear()
      .range([height, 0]);

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .tickFormat(Y_DATA_FORMAT);

  var value_data = _.map(groups, function(d) {
    return {x_axis: d, y_axis: bar_data[d]};
  });

  x.domain(value_data.map(function(d) { return d.x_axis; }));
  y.domain([0, d3.max(value_data, function(d) { return d.y_axis; })]);

  var svg = d3.select("#canvas-svg").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  var detailBox = svg.append("svg:text")
      .attr("dx", "20px")
      .attr("dy", "-5px")
      .attr("text-anchor", "right")
      .style("fill", "#1D5096")
      .style("font-weight", "bold");

  var title = svg.append("text")
      .attr("x", 0)
      .attr("y", -50)
      .attr("class","chart-title")
      .text(bar_data.chart_title);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(0)")
      .attr("y", -25)
      .attr("x", 0)
      .style("text-anchor", "left")
      .text(Y_AXIS_LABEL);

  svg.selectAll(".bar")
      .data(value_data)
    .enter().append("rect")
      .style("fill", function(d) {
        if (d.x_axis === groups[0]) {
          return COLOR_1;
        } else {
          return COLOR_2;
        }
      })
      .attr("x", function(d) { return x(d.x_axis); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y_axis); })
      .attr("height", function(d) { return height - y(d.y_axis); })
      .on("mouseover", function(d, i, j) {
        detailBox.attr("x", x.range()[i] - Y_DATA_FORMAT(d.y_axis).length / 2)
          .attr("y", y(d.y_axis))
          .text(Y_DATA_FORMAT(d.y_axis))
          .style("visibility", "visible");

        d3.select(this)
          .style("opacity", 0.7);
      }).on("mouseout", function() {
        detailBox.style("visibility", "hidden");

        d3.select(this)
          .style("opacity", 1.0);
      });
};

var width = width / data.length - 10;
width = width > 180 ? width : 180;

var keys = Object.keys(data[0]);
for (var i = 0; i < keys.length; i++) {
  if (keys[i] !== "chart_title" && keys[i] !== "unit") {
    groups.push(keys[i]);
  }
}

for (i = 0; i < data.length; i++) {
  makeBar(width, width, data[i]);
}
   </script> 
    </body>



</html>

对此的任何帮助都会很棒!!!

Answer 1

您的代码似乎不完整

您缺少在代码中使用的2个变量config和vida。在</head>

之前添加此脚本块

<script>
    var config = {
        color1: 'red',
        color2: 'blue',
    }
    var vida = {}
</script>

您还缺少变量data。像这样修改value_data声明

var value_data = data = [
    {
       ...

您似乎也在使用underscore.js但不包含脚本。在</head>

之前添加此权限

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

如果有的话，请随意修改本地路径的路径。

虽然这3个更改应该可以正常工作，但是您的标记存在其他问题（比如您的样式块不在您的脑海中，您的身体顶部似乎有不匹配的标记......）你也需要纠正。

无法将Json数据绑定到d3.js对象

1 个答案: