我在d3上构建了一个数据，并使用Polymer将其包装为Web组件。出于某种原因，我无法使用数据绑定并传入我的输入。我不确定为什么错误会自行发生。我想我已经处理了数据为空或未定义的情况，但我仍然得到它。
我的index.html（这是调用我的聚合物元素主题模型的演示文件：
<!doctype html>
<html>
<head>
<script src="../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<script>
</script>
<link rel="import" href="topic_model.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
</head>
<body>
<template is='dom-bind'>
<iron-ajax auto url="./topic_model_data.json" last-response="{{data}}"></iron-ajax>
<topic-model mds="{{data.mds}}" topiccorr="{{data.topic_corr}}" topicsize="{{data.topic_size}}"> </topic-model>
</template>
</body>
</html>
我的主题模型元素：
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="topic-model">
<template>
<style type="text/css"></style>
<h2>Topic modeling</h2>
<div id='topicModel'>
</div>
</template>
<script type="text/javascript" src="../d3/d3.js"></script>
<script type="text/javascript">
Polymer({
is: 'topic-model',
properties: {
mds: {
type: Array,
observer: 'drawxy'
},
topicsize: {
type: Array,
observer: 'drawradius'
},
topiccorr: {
type: Array,
observer: 'drawlines'
}
},
ready: function() {
var w = 640;
var h = 480;
d3.select("#topicModel").append('svg').attr('id', 'svg').attr("width", w).attr('height', h);
console.log("topiccorr being passed is " + this.topiccorr);
console.log("mds being passed is " + this.mds);
console.log("topicsize being passed is " + this.topicsize);
this.drawlines(this.topiccorr);
this.drawxy(this.mds);
this.drawradius(this.topicsize);
},
drawxy: function(val) {
if (val !== undefined && val !== null) {
var w = 640;
var h = 480;
var xScale = d3.scale.linear()
.domain([d3.min(val, function(d) { return d[0]; }), d3.max(val, function(d) { return d[0]; })])
.range([0.1*w, 0.9*w]);
var yScale = d3.scale.linear()
.domain([d3.min(val, function(d) { return d[1]; }), d3.max(val, function(d) { return d[1]; })])
.range([0.1*h, 0.9*h]);
d3.select('svg')
.selectAll('.circles')
.data(val)
.enter()
.append('circle')
.attr('class', 'circles')
.attr("r", 40)
.attr('cx', function(d) {
return xScale(d[0])
})
.attr('cy', function(d) {
return yScale(d[1])
});
}
},
drawradius: function(val) {
if (val !== undefined && val !== null) {
var colors = d3.scale.category10();
var rScale = d3.scale.linear()
.domain([d3.min(val, function(d) { return d; }), d3.max(val, function(d) { return d; })])
.range([10, 40]);
d3.select('svg')
.selectAll('.circles')
.data(val)
.attr("r", function(d) {
return rScale(d);
})
.style("fill", function(d, i) {
return colors(i);
});
var w = 640;
var h = 480;
xyCoor = this.mds;
var xScale = d3.scale.linear()
.domain([d3.min(xyCoor, function(d) { return d[0]; }), d3.max(xyCoor, function(d) { return d[0]; })])
.range([0.1*w, 0.9*w]);
var yScale = d3.scale.linear()
.domain([d3.min(xyCoor, function(d) { return d[1]; }), d3.max(xyCoor, function(d) { return d[1]; })])
.range([0.1*h, 0.9*h]);
d3.select('svg')
.selectAll('.text')
.data(xyCoor)
.enter()
.append("text")
.attr("class", "text")
.text(function(d, i) {
return i+1;
})
.attr("x", function(d) {
return xScale(d[0]);
})
.attr("y", function(d) {
return yScale(d[1]);
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", function(d) {
return rScale(d['r'])/2;
})
.attr("text-anchor", "middle");
}
},
drawlines: function(val) {
if (val !== undefined && val !== null) {
var w = 640;
var h = 480;
xyCoor = this.mds;
var xScale = d3.scale.linear()
.domain([d3.min(xyCoor, function(d) { return d[0]; }), d3.max(xyCoor, function(d) { return d[0]; })])
.range([0.1*w, 0.9*w]);
var yScale = d3.scale.linear()
.domain([d3.min(xyCoor, function(d) { return d[1]; }), d3.max(xyCoor, function(d) { return d[1]; })])
.range([0.1*h, 0.9*h]);
var edges = [];
for (i = 0; i < val.length; i++) {
for (j = 0; j < val.length; j++) {
if (i != j && val[i][j] < 0) {
// Note: '< 0' is because correlation is negative currently
edges.push({
'source': i,
'target': j,
'correlation': -val[i][j] // negative to make it postive
})
}
}
}
var cScale = d3.scale.linear()
.domain([d3.min(edges, function(d) { return d['correlation']; }), d3.max(edges, function(d) { return d['correlation']; })])
.range([0.5, 5]);
d3.select('svg')
.selectAll('.lines')
.data(edges)
.enter()
.append('line')
.attr('class', 'lines')
.attr('x1', function(d) {
return xScale(xyCoor[d.source][0]);
})
.attr('y1', function(d) {
return yScale(xyCoor[d.source][1]);
})
.attr('x2', function(d) {
return xScale(xyCoor[d.target][0]);
})
.attr('y2', function(d) {
return yScale(xyCoor[d.target][1]);
})
.style("stroke", "#ccc")
.style("stroke-width", function(d) {
return cScale(d['correlation']);
});
}
}
});
</script>
</dom-module>
我实际上是网络开发人员的新手，所以我很喜欢我的方式，所以我可能会遗漏一些基本/明显的东西：/