如何在 JavaScript 中创建 JSONArrays 的子弹图？答案

【问题标题】：How to create Bullet Charts of JSONArrays in JavaScript?如何在 JavaScript 中创建 JSONArrays 的子弹图？
【发布时间】：2011-12-18 00:40:32
【问题描述】：

帮助！如何从这些网页更改子弹图 JavaScript 代码： http://mbostock.github.com/d3/ex/bullet.html 这样，用于可视化的数据将不会来自 "bullets.json" (d3.json("bullets.json", function(data) {) ，但它已经作为源代码中的变量. 我的解决方案不起作用：

var data = [{title: "Revenue", subtitle: "", ranges: [0,0,0], measures: [220,270], markers: [0] },                //!!!
        {title: "Profit" , subtitle: "", ranges: [0,0,0], measures: [21,23]  , markers: [0] } ];

源代码：

<html>
<head>
<title>Bullet Charts</title>
<script type="text/javascript" src="../../d3.js"></script>
<script type="text/javascript" src="../../d3.chart.js"></script>
<link type="text/css" rel="stylesheet" href="../button.css"/>
<link type="text/css" rel="stylesheet" href="bullet.css"/>
</head>
<body>
<div id="chart">
  <button class="first last" onclick="transition()">
    Update
  </button><p>
</div>
<script> 
var w = 960,
h = 50,
m = [5, 40, 20, 120]; // top right bottom left

var chart = d3.chart.bullet()
.width(w - m[1] - m[3])
.height(h - m[0] - m[2]);

 //d3.json("bullets.json", function(data) {

 var data = [{title: "Revenue", subtitle: "", ranges: [0,0,0], measures: [220,270],  markers: [0] },                //!!!
        {title: "Profit" , subtitle: "", ranges: [0,0,0], measures: [21,23]  ,  markers: [0] } ];              //!!!

 var vis = d3.select("#chart").selectAll("svg")
  .data(data)
.enter().append("svg:svg")
  .attr("class", "bullet")
  .attr("width", w)
  .attr("height", h)
.append("svg:g")
  .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
  .call(chart);

 var title = vis.append("svg:g")
  .attr("text-anchor", "end")
  .attr("transform", "translate(-6," + (h - m[0] - m[2]) / 2 + ")");

  title.append("svg:text")
  .attr("class", "title")
  .text(function(d) { return d.title; });

  title.append("svg:text")
  .attr("class", "subtitle")
  .attr("dy", "1em")
  .text(function(d) { return d.subtitle; });

  chart.duration(1000);
 window.transition = function() {
 vis.map(randomize).call(chart);
 };
 }
 );

 function randomize(d) {
 if (!d.randomizer) d.randomizer = randomizer(d);
 d.ranges = d.ranges.map(d.randomizer);
 d.markers = d.markers.map(d.randomizer);
 d.measures = d.measures.map(d.randomizer);
 return d;
 }

 function randomizer(d) {
 var k = d3.max(d.ranges) * .2;
 return function(d) {
 return Math.max(0, d + k * (Math.random() - .5));
 };
 }

 </script>
  </body>
 </html>

【问题讨论】：

标签： javascript html github visualization arrays

【解决方案1】：

var Data='${datafrom}'; 
Json= JSON.parse(Data);

var chart = d3.bullet()
    .width(width)
    .height(height);

  var svg = d3.select("body").selectAll("svg")
      .data(Json)
      .enter().append("svg")
      .attr("class", "bullet")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(chart);


  });

【讨论】：

【解决方案2】：

在 var data = [{title: "(...) type:

data = JSON.stringify(data);

【讨论】：