救命啊!如何从这些网页更改子弹图 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>
最佳答案
var data = [{title: "(...) type:
之后data = JSON.stringify(data);
关于javascript - 如何在 JavaScript 中创建 JSONArray 的子弹图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7942044/