D3.js复制我的数据
D3.js duplicating my data
我正在尝试为一些与学生相关的数据创建数据可视化(下面的示例记录),但是当 d3 呈现它时,它会遍历数据两次并覆盖它,只在屏幕上留下第二次结果。我在这里使用行计数器,所以我有办法根据矩形的数量设置每个矩形的 y 坐标。我认为这在某种程度上把事情搞砸了。任何关于如何使数据不会迭代两次的帮助将不胜感激。
此外,为了以防万一,此代码位于一个角度.js指令中。
抱歉,如果我只是在这里做一些非常愚蠢的事情
// student records sample...
var studentData = [
{
"studentID" : 1001,
"firstName" : "jill",
"lastName" : "smith",
"workLoadDifficulty" : 16,
"smileStartAngle" : -90,
"smileEndAngle" : 90,
},
{
"studentID" : 1008,
"firstName" : "bob",
"lastName" : "smith",
"workLoadDifficulty" : 99,
"smileStartAngle" : 90,
"smileEndAngle" : -90,
}
];
(function () {
'use strict';
angular.module('learnerApp.directives')
.directive('d3Bars', ['d3', function(d3) {
return {
restrict: 'EA',
scope: {
data: "=",
label: "@",
onClick: "&"
},
link: function(scope, iElement, iAttrs) {
var paddingForShape = 10;
var rowCounter = -1;
var height = 400;
var width = 300;
var svgContainer = d3.select(iElement[0])
.append("svg")
.attr("width", width)
.attr('height', height);
// on window resize, re-render d3 canvas
window.onresize = function() {
return scope.$apply();
};
scope.$watch(function(){
return angular.element(window)[0].innerWidth;
}, function(){
return scope.render(scope.data);
}
);
// watch for data changes and re-render
scope.$watch('studentData', function(newVals, oldVals) {
return scope.render(newVals);
}, true);
// define render function
scope.render = function(data){
// remove all previous items before render
svgContainer.selectAll("*").remove();
var workLoadColor = d3.scale.category10()
.domain([0,100])
.range(['#02FA28', '#73FA87', '#C0FAC9','#FAE4C0', '#FAC775', '#FAA823','#FA9A00','#FA8288', '#FC4750', '#FA0511' ])
var studentRects = svgContainer.selectAll('rect')
.data(studentData, function(d) {
console.log(d.studentID);
console.log('hello');
return "keyVal" + d.studentID;
})
.enter()
.append("rect");
var studentRectAttributes = studentRects
.attr("x", function(d,i) {
return ((i * 50) % width) + paddingForShape;
})
.attr("y", function(d,i) {
var value = ((i * 50) % width)
if (value === 0) {
rowCounter = rowCounter + 1;
}
var value = (rowCounter * 50);
console.log('Y Val: ', i);
console.log(value);
return value;
})
.attr("height", 30)
.attr("width", 40)
.style("fill", function(d) {
return workLoadColor(d.workLoadDifficulty)
});
};
}
};
}]);
}());
如果要执行两次数据联接,则需要指定一个key
,以免覆盖当前所选内容中的元素。您可能希望将studentRects
定义更改为:
var studentRects = svgContainer.selectAll('rect')
.data(studentData, function(d) { return d.firstName + ' ' + d.lastName; });
studentRects.enter().append("rect");
见selection.data([values[, key]])
如果未指定关键功能,则指定数组中的第一个基准面将指定给当前选定内容中的第一个元素,将第二个基准面指定给第二个选定元素,依此类推。
尝试将选择器更改为var studentRects = svgContainer.selectAll('rect')
,这将与您在enter()
上添加的<rect>
元素相匹配
**更新**
除了@Wex给出的关键建议外,我还在 plunker 中输入了代码并使其正常工作。 您的示波器上有一个额外的监视,删除它可以解决问题(不过,您可能需要重新访问一些有关进入/退出的 d3 文档):
scope.$watch(function(){
return angular.element(window)[0].innerWidth;
}, function(){
return scope.render(scope.data);
});
在这里普伦克: http://plnkr.co/edit/z0MXkUVFNmMEGJAaz7dw?p=preview
相关文章:
- 如何将JSON数据导入我的ejs模板
- 无法将数据从firebase获取到我的html页面
- 用我的json数据填充JQuery DataTable
- 在php和mysql中选择选项.一旦选择了选项,就列出我的sql数据库数据
- ajax请求成功,但可以'我看不到我的数据
- 如何检查Json文件更新,如果更新了,则用更新的数据刷新我的页面
- 更新数据,而不是用javascript和jquery将其添加到我的表中
- 无法在我的JSON文件中发布数据
- 我尝试使用我的本地js文件来获取远程IP数据,但它不起作用
- 我的地图数据's不会使用php存储在mysql数据库中
- 如何使用XMLHttpRequest()不断地将数据发送到我的网站中的另一个页面
- 我没有'我不知道为什么我的jqGrid子网格没有'不要给我看数据
- 将用户选择的数据临时存储在我的阵列中
- 用我的函数jquery给出数据/参数
- JQuery$.ajax()发布数据以调用我的控制器中的方法
- 我的复选框没有't使用的循环来显示数据
- 在我的案例中,如何获取异步数据
- 如何在 D3 中更新我的多折线图数据
- “玩转这些数据!”我的plot.js图没有显示
- jQuery不是从JSON中提取数据并添加数据-我的代码有什么问题?