将SVG图附加到节点后会使其崩溃，这是基本丢失的东西。
将SVG图附加到节点后会使其崩溃，这是基本丢失的东西。
提问于 2019-06-10 10:32:14
我试图将d3fc图呈现给react.js元素中的svg节点并返回全部内容，但当我在react.js选择的d3上调用.datum(my_data)时，它会崩溃。我想我遗漏了一些关于DOM或svg节点的基本特性。
这是我试图重新创建的图表教程(除了示例的数据之外，我使用了自己的600数组{'x':value，'y'：value} datapair)：
<!DOCTYPE html>
<script src="https://unpkg.com/d3@4.6.0"></script>
<script src="https://unpkg.com/d3fc@12.1.0"></script>
<div id='small-multiples'></div>
<style>
html, body, #small-multiples {
height: 100%;
margin: 0;
}
</style>
<script>
d3.tsv('askmefi_category_year.tsv')
.row(function(r) {
return {
category: r.category,
n: Number(r.n),
year: Number(r.year)
}
})
.get(function(data) {
var nested = d3.nest()
.key(function(k) { return k.category; })
.entries(data);
// pick on of the data series
var dataSeries = nested[7].values;
var yExtent = fc.extentLinear()
.accessors([function(d) { return d.n; }])
.pad([0, 0.2])
.include([0]);
var xExtent = fc.extentLinear()
.accessors([function(d) { return d.year; }]);
var line = fc.seriesSvgLine()
.crossValue(function(d) { return d.year; })
.mainValue(function(d) { return d.n; });
var chart = fc.chartSvgCartesian(
d3.scaleLinear(),
d3.scaleLinear())
.yDomain(yExtent(data))
.xDomain(xExtent(data))
.yOrient('left')
.plotArea(line);
// render
d3.select('#small-multiples')
.datum(dataSeries)
.call(chart);
});这是我的(几乎相同的)反应函数。
plot_d3fc_x(data){
var dataSeries = data
console.log('entered d3fc func, data:', dataSeries)
var yExtent = fc.extentLinear()
.accessors([function(d){
// console.log(d.y)
return d.y;}])
.pad([0,0.2])
.include([0]);
var xExtent = fc.extentLinear()
.accessors([function(d){
// console.log(d.x)
return d.x;}])
var line = fc.seriesSvgLine()
.crossValue(function(d){return d.x;})
.mainValue(function(d){return d.y;})
var chartitself = fc.chartSvgCartesian(
d3.scaleLinear(),
d3.scaleLinear())
.yDomain(yExtent(data))
.xDomain(xExtent(data))
.yOrient('left')
.plotArea(line);
//CRASHES HERE
d3.select('#svg_group')
.datum(dataSeries)
.call(chartitself);
}我在reactjs元素中的呈现实际上只需要为上面的函数选择一件东西：
render() {
return (
<svg id="svg_group"/>
)
}如果有人能澄清我调用该函数时遇到的错误，我将不胜感激：
"TypeError: nodes[i].requestRedraw is not a function
SVGElement.<anonymous>
node_modules/d3fc/build/d3fc.js:7053
7050 | transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(yAxisStore(yAxisComponent));
7051 | });
7052 | container.each(function (d, i, nodes) {
> 7053 | return nodes[i].requestRedraw();
| ^ 7054 | });
7055 | decorate(container, data, index);
7056 | });
View compiled
Selection.each
node_modules/d3-selection/src/selection/each.js:4
1 | export default function (callback) {
2 | for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
3 | for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
> 4 | if (node = group[i]) callback.call(node, node.__data__, i, group);
5 | }
6 | }
7 |
View compiled
SVGGElement.<anonymous>
node_modules/d3fc/build/d3fc.js:7052
7049 | yAxisComponent.decorate(yDecorate);
7050 | transitionPropagator(d3Selection.select(nodes[i])).select('svg').call(yAxisStore(yAxisComponent));
7051 | });
> 7052 | container.each(function (d, i, nodes) {
| ^ 7053 | return nodes[i].requestRedraw();
7054 | });
7055 | decorate(container, data, index);
View compiled
Selection.each
node_modules/d3-selection/src/selection/each.js:4
1 | export default function (callback) {
2 | for (var groups = this._groups, j = 0, m = groups.length; j < m; ++j) {
3 | for (var group = groups[j], i = 0, n = group.length, node; i < n; ++i) {
> 4 | if (node = group[i]) callback.call(node, node.__data__, i, group);
5 | }
6 | }
7 |
View compiled
cartesian
node_modules/d3fc/build/d3fc.js:6993
6990 |
6991 | var cartesian = function cartesian(selection$$1) {
6992 | var transitionPropagator = propagateTransition(selection$$1);
> 6993 | selection$$1.each(function (data, index, group) {
| ^ 6994 | var container = containerDataJoin(d3Selection.select(group[index]), [data]);
6995 | container.enter().attr('auto-resize', '');
6996 | chartLabelDataJoin(container, [xOrient(data)]).attr('class', function (d) {
View compiled
Selection.call
node_modules/d3-selection/src/selection/call.js:4
1 | export default function () {
2 | var callback = arguments[0];
3 | arguments[0] = this;
> 4 | callback.apply(null, arguments);
5 | return this;
6 | }
View compiled
cartesianBase
node_modules/d3fc/build/d3fc.js:7236
7233 | container.select('.y-label-container>.y-label').text(yLabel);
7234 | decorate(container, data, index);
7235 | });
> 7236 | selection$$1.call(cartesian);
| ^ 7237 | };
7238 |
7239 | rebindAll(cartesianBase, cartesian, include(/^x/, /^y/, 'chartLabel'));
View compiled
Selection.call
node_modules/d3-selection/src/selection/call.js:4
1 | export default function () {
2 | var callback = arguments[0];
3 | arguments[0] = this;
> 4 | callback.apply(null, arguments);
5 | return this;
6 | }
View compiled
LinePlot.plot_d3fc_x
src/d3charts/LinePlot.js:193
190 | .attr("height", svgHeight);
191 |
192 | console.log(d3.select('#svg_group'))
> 193 | svg
| ^ 194 | .append("g")
195 | .datum(dataSeries)
196 | .call(chartitself);
View compiled
LinePlot.componentDidMount
src/d3charts/LinePlot.js:43
40 | console.log('body', d3.select('body'))
41 | console.log(d3.select('#small-multiples'))
42 | console.log(d3.select('svg'))
> 43 | this.plot_d3fc_x(construct_d3_input(parsed_data['rest_dict']['x']))
| ^ 44 | }
45 |
46 | //pass in the len 600 array
View compiled
▶ 16 stack frames were collapsed.
(anonymous function)
src/App.js:132
129 | })
130 | })
131 | .then(() => {
> 132 | this.setState({
| ^ 133 | route: "display/charts"
134 | })
135 | console.log('route set to display/charts')```回答 1
Stack Overflow用户
发布于 2019-10-24 15:35:46
我也遇到了类似的问题--试图将d3fc调用到SVG对象似乎就是问题所在。将react呈现的容器更改为div修复它。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56524663
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号