我正在使用 d3.js 在 Partial.js 框架的视图中从 JSON 数据集生成图。
这是视图页面的代码：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div id="truckDistance">
<!-- div with the plot -->
</div>
<!-- popup -->
<div id="tooltip" class="hidden">
<p class="heading">Node ID:
<span id="node_id">word</span>
</p>
<p class="heading">Distance</p>
<p class="indent">
<span id="distance">5</span>km</p>
<p class="heading">License Plate</p>
<p class="indent">
<span id="lplate">5</span>
</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
var margin = {
top: 25,
right: 75,
bottom: 85,
left: 85
},
w = 600 - margin.left - margin.right,
h = 350 - margin.top - margin.bottom;
var padding = 10;
var colors = [
["Local", "#377EB8"],
["Global", "#4DAF4A"]
];
var dataset = [{
"node_id": "8",
"distance": 7889,
"lplate": "50-HX-90"
}, {
"node_id": "16",
"distance": 2334,
"lplate": "50-HX-90"
}, {
"node_id": "24",
"distance": 2231,
"lplate": "50-HX-90"
}, {
"node_id": "32",
"distance": 200,
"lplate": "50-HX-90"
}, {
"node_id": "66",
"distance": 5000,
"lplate": "50-HX-90"
}, {
"node_id": "94",
"distance": 233,
"lplate": "50-HZ-90"
}
];
var xScale = d3.scale.ordinal()
.domain(d3.range(dataset.length))
.rangeRoundBands([0, w], 0.05); // Width of each bar
// ternary operator to determine if global or local has a larger scale
var yScale = d3.scale.linear()
.domain([0, d3.max(dataset, function(d) {
return d.distance;
})])
.range([h, 0]);
/*X Axis label*/
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(function(d) {
return dataset[d].node_id;
})
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var commaFormat = d3.format(','); //currently not used
//SVG element
var svg = d3.select("#truckDistance")
.append("svg")
.attr("width", w + margin.left + margin.right)
.attr("height", h + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// Graph Bars
var sets = svg.selectAll(".set")
.data(dataset)
.enter()
.append("g")
.attr("class", "set")
.attr("transform", function(d, i) {
return "translate(" + xScale(i) + ",0)";
}); //moving all the bars to their positions (added /2)
sets.append("rect")
.attr("class", "distance")
.attr("width", xScale.rangeBand() / 2)
.attr("y", function(d) {
return yScale(d.distance);
})
.attr("x", xScale.rangeBand() / 4) //This will get bars closer to the y-axis
.attr("height", function(d) {
return h - yScale(d.distance);
})
.attr("fill", colors[0][1])
.on("mouseover", function(d, i) {
//Get this bar's x/y values, then augment for the tooltip
var xPosition = parseFloat(xScale(i) + xScale.rangeBand());
var yPosition = h / 2;
//Update Tooltip Position & value
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#lplate")
.text(d.lplate);
d3.select("#tooltip")
.select("#distance")
.text(d.distance); /*Assuming we will be rounding the Km's to units.*/
d3.select("#tooltip")
.select("#node_id")
.style("color", colors[1][1])
.text(d.node_id);
d3.select("#tooltip").classed("hidden", false);
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").classed("hidden", true);
});
// Labels
sets.append("text")
.attr("class", "distance")
.attr("width", xScale.rangeBand() / 2)
.attr("y", function(d) {
return yScale(d.distance);
})
.attr("dy", 10)
.attr("dx", (xScale.rangeBand() / 2.5)) // changed this to match translation
// .attr("text-anchor", "middle")
.attr("font-family", "'Ubuntu', sans-serif")
.attr("font-size", "8px")
.attr("fill", "white")
.text(function(d) {
return commaFormat(d.distance);
});
// xAxis
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + (h) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", ".15em")
.attr("transform", function(d) {
return "rotate(-25)";
});
// yAxis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(0 ,0)")
.call(yAxis);
// xAxis label
svg.append("text")
.attr("transform", "translate(" + (w / 2) + " ," + (h + margin.bottom - 5) + ")")
.style("text-anchor", "middle")
.text("Vehicle");
//yAxis label
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (h / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Distance (Km)");
// Title
svg.append("text")
.attr("x", (w / 2))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "16px")
.style("text-decoration", "underline")
.text("Distance by Vehicle");
}
</script>
当我启动应用程序并尝试使用此视图访问页面时，不会使用 d3 Javascript 执行 javascript 代码，因此不会出现绘图。如果我检查代码，而不是渲染的 SVG，我只有本机 javascript。
我错过了什么吗？