javascript - 无法将 Json 数据绑定(bind)到 d3.js 对象

标签 javascript json d3.js

我正在尝试将 Json 数据对象绑定(bind)到 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
  }
]

尽管 svg.data 有一个 value var 参数，但我尝试将数据定义为变量 (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>

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

最佳答案

您的代码似乎不完整

<小时/>

您缺少代码中使用的 2 个变量 config 和 vida。在 </head> 之前添加此脚本 block 

<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 个更改应该可以使其正常工作，但您的标记还存在其他问题(例如您的样式 block 不在您的头脑中，您的正文顶部似乎有一个不匹配的标签...)，您将也需要纠正。

关于javascript - 无法将 Json 数据绑定(bind)到 d3.js 对象，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31500373/

上一篇：javascript - Javascript 表单向我返回 "undefined"警报

下一篇：javascript - 获取 else 语句并将其添加到 AJAX 调用函数(响应)

相关文章：

javascript - 在 D3 Js Vertical Tree 中单击一次在父级下打开所有子级

javascript - 单击 div 类 a href 按钮时如何聚焦于输入元素

javascript - 如果预期的跨域src是404，如何在iframe中加载默认页面？

javascript - 我应该如何处理针对我的对象模型的格式不正确的 JSON 响应错误？ [ES6]

javascript - 追加 JSON 对象

javascript - 从 d3.js timeFormat 中删除前导零

javascript - 如何计算力导向图(d3.js)的入度，出度和加权度？

Javascript:创建变量然后在提示中使用它

javascript - 在 jQuery 中扩展 $fn 命名空间

javascript - 发送额外的 JSON 数据以及发送序列化表单数据的现有 AJAX 帖子

©2024 IT工具网  联系我们