在具有部分.js和 d3.js 的视图中执行 JS
Execute JS in a View with partial.js and d3.js
我正在使用 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>
当我启动应用程序并尝试使用此视图访问页面时,javascript 代码不会使用 d3 Javascript 执行,因此不会出现绘图。如果我检查代码,而不是渲染的 SVG,我只有原生 javascript。
我错过了什么吗?
我在本地拉了这个,我认为你只是错过了 jQuery ready 语句的关闭 peren:
});
</script>
相关文章:
- Backbone.js视图中的多个模型
- 带有jquery插件的backbone.js视图
- 将js对象更改为使用嵌套的可观察数组敲除js视图模型
- Angular JS-视图不工作
- 为什么当我单击X时,所有项目都会从我的Backbone.js视图中删除
- 主干.js视图不会在页面加载时显示,但可以在控制台中与 jQuery 配合使用
- 单击'Backbone.js视图'不要工作
- 设置Sails js视图扩展不'不起作用
- 在 Node.js 视图中创建 OpenLayers 映射
- 支持使用Backbone.js视图加载异步模板
- Backbone.js视图可以有一个模型和一个集合吗
- backbone.js视图没有't由于异步获取而显示结果;t渲染
- 为什么我在尝试实例化一个空的backbone.js视图时出现类型错误
- 如何创建adonis.js视图
- Backbone.js视图未渲染
- Backbone js视图渲染点击方法未调用[Very Basic]
- 我可以't填充backbone.js视图
- 如何在anular.js视图中比较两个字符串
- 在Backbone.js视图中拖动gabilly.js事件
- 关于主干的困惑.js视图的渲染函数