为什么这个图表d3.js不适用于require.js
Why does not this chart d3.js work with require.js?
我制作了一个饼图,并试图使用require.js在页面上显示它,但无法正确执行。Firebug显示这个页面上有一定大小的svg,并且这个页面是空的。我试着实现其他模块——它们运行得很好。
文件main.js:
require.config({
paths: {
'd3': "http://d3js.org/d3.v3.min"
},
shim: {
'd3': {exports:'d3'}
}
});
require([
'd3',
'pie-chart'
], function (d3, piechart) {
d3.select("body").append("h1").text("Successfully loaded D3 version " + d3.version);
d3.select("body").append("svg");
});
文件pie-cart.js:
define('pie-chart', function () {
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var percentageFormat = d3.format("%");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.values;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.json("staff.json", function(error, json_data) {
var data = d3.nest()
.key(function(d) {
return d.Position;
})
.rollup(function(d) {
return d.length;
}).entries(json_data);
data.forEach(function(d) {
d.percentage = d.values / json_data.length;
});
console.log(data)
console.log("data variable", data);
console.log("pie(data)", pie(data));
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc")
.on('mouseover', function() {
var current = this;
var others = svg.selectAll(".arc").filter(function(el) {
return this != current
});
others.selectAll("path").style('opacity', 0.8);
})
.on('mouseout', function() {
var current = this;
d3.select(this)
.style('opacity', 1);
var others = svg.selectAll(".arc").filter(function(el) {
return this != current
});
others.selectAll("path").style('opacity', 1);
});
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color(d.data.key);
});
g.append("text")
.attr("transform", function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) {
console.log("d is", d);
return percentageFormat(d.data.percentage);
});
var legend = d3.select("body").append("svg")
.attr("class", "legend")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", function(d, i) {
return color(d.key);
});
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d) { return d.key; });
});
});
文件d3.js我是这样包装的:
define('d3', function () {
// require.js code
});
d3不依赖于JQuery。我从你的plunk中删除了jquery,你也不需要shim属性。你的main.js应该是这样的:
require.config({
paths: {
'd3': "https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.9/d3.min"
}
});
require([
'd3',
'pie-chart'
], function ( d3, $, piechart) {
});
以下是工作的plunk链接:http://plnkr.co/edit/Le4tpejMvPxLA08isacW?p=preview
相关文章:
- jQuery-2.1.1.min.js或最新版本jQuery-2.13.min.js不会't支持'@
- 使用.on动态添加jquery/js不知道的html元素
- 为什么 JS 不在滚动时调用函数
- AngularJS选项卡集中的Chart.js不呈现
- Moment.js不接受变量作为参数
- 在Meteor:p5.AudioIn()中集成p5.sound.js不是构造函数
- React.js不区分同一类的两个组件
- 预编译的JSX React,js不起作用
- Moment.js不显示结果
- JS不工作:Sublime 3编辑器-Var main=函数()-=不是“”;激活“;(功能新手)
- Angular js 不初始化
- Backbone.js 不起作用,而 Underscore、JSON 和 jQuery 可以
- 为什么我的JS不添加一个HTML类
- HTML 显示/隐藏元素 JS 不起作用
- 节点.js 不等待数据
- CSS 类在特定场景中不适用
- 为什么node.js不等到恢复完成(_search request in to elasticsearch)
- 噩梦JS不工作
- CSS或JS规则适用于所有Div更改Div内部Div的BG颜色,而不更改父Div
- Cytoscape.js:样式不适用