0
我使用d3.js從Partial.js框架的視圖中的JSON數據集生成圖。使用partial.js和d3.js在視圖中執行JS
這裏的視圖頁面的代碼：
<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。
我錯過了什麼？
你收到任何錯誤訊息？ –
Nop只是不解析。顯然是與Partials.js和一些不允許JS在視圖中執行的奇怪行爲有關。將整個代碼更改爲Express.js，現在一切都解決了 – Tallis