如果源 json 已更新(添加或删除项目),则动态更新 D3 旭日
Dynamically update D3 Sunburst if the source json is updated (item added or deleted)
我是 D3 的新手,如果源 json 被修改,我会尝试动态更新图表。但我无法做到这一点。
请检查此 plunkr
Js:
var width = 500,
height = 500,
radius = Math.min(width, height) / 2;
var x = d3.scale.linear()
.range([0, 2 * Math.PI]);
var y = d3.scale.sqrt()
.range([0, radius]);
var color = d3.scale.category10();
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + (height / 2 + 10) + ") rotate(-90 0 0)");
var partition = d3.layout.partition()
.value(function(d) {
return d.size;
});
var arc = d3.svg.arc()
.startAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x)));
})
.endAngle(function(d) {
return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx)));
})
.innerRadius(function(d) {
return Math.max(0, y(d.y));
})
.outerRadius(function(d) {
return Math.max(0, y(d.y + d.dy));
});
//d3.json("/d/4063550/flare.json", function(error, root) {
var root = initItems;
var g = svg.selectAll("g")
.data(partition.nodes(root))
.enter().append("g");
var path = g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
})
.on("click", click)
.each(function(d) {
this.x0 = d.x;
this.dx0 = d.dx;
});
//.append("text")
var text = g.append("text")
.attr("x", function(d) {
return y(d.y);
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("transform", function(d) {
return "rotate(" + computeTextRotation(d) + ")";
})
.text(function(d) {
return d.name;
})
.style("fill", "white");
function computeTextRotation(d) {
var angle = x(d.x + d.dx / 2) - Math.PI / 2;
return angle / Math.PI * 180;
}
function click(d) {
console.log(d)
// fade out all text elements
if (d.size !== undefined) {
d.size += 100;
};
text.transition().attr("opacity", 0);
path.transition()
.duration(750)
.attrTween("d", arcTween(d))
.each("end", function(e, i) {
// check if the animated element's data e lies within the visible angle span given in d
if (e.x >= d.x && e.x < (d.x + d.dx)) {
// get a selection of the associated text element
var arcText = d3.select(this.parentNode).select("text");
// fade in the text element and recalculate positions
arcText.transition().duration(750)
.attr("opacity", 1)
.attr("transform", function() {
return "rotate(" + computeTextRotation(e) + ")"
})
.attr("x", function(d) {
return y(d.y);
});
}
});
} //});
// Word wrap!
var insertLinebreaks = function(t, d, width) {
alert(0)
var el = d3.select(t);
var p = d3.select(t.parentNode);
p.append("g")
.attr("x", function(d) {
return y(d.y);
})
// .attr("dx", "6") // margin
//.attr("dy", ".35em") // vertical-align
.attr("transform", function(d) {
return "rotate(" + computeTextRotation(d) + ")";
})
//p
.append("foreignObject")
.attr('x', -width / 2)
.attr("width", width)
.attr("height", 200)
.append("xhtml:p")
.attr('style', 'word-wrap: break-word; text-align:center;')
.html(d.name);
alert(1)
el.remove();
alert(2)
};
//g.selectAll("text")
// .each(function(d,i){ insertLinebreaks(this, d, 50 ); });
d3.select(self.frameElement).style("height", height + "px");
// Interpolate the scales!
function arcTween(d) {
var xd = d3.interpolate(x.domain(), [d.x, d.x + d.dx]),
yd = d3.interpolate(y.domain(), [d.y, 1]),
yr = d3.interpolate(y.range(), [d.y ? 20 : 0, radius]);
return function(d, i) {
return i ? function(t) {
return arc(d);
} : function(t) {
x.domain(xd(t));
y.domain(yd(t)).range(yr(t));
return arc(d);
};
};
}
function arcTweenUpdate(a) {
console.log(path);
var _self = this;
var i = d3.interpolate({ x: this.x0, dx: this.dx0 }, a);
return function(t) {
var b = i(t);
console.log(window);
_self.x0 = b.x;
_self.dx0 = b.dx;
return arc(b);
};
}
setTimeout(function() {
path.data(partition.nodes(newItems))
.transition()
.duration(750)
.attrTween("d", arcTweenUpdate)
}, 2000);
除了@Cyril建议删除以下行之外:
d3.select(self.frameElement).style("height", height + "px");
我在你的小提琴中做了进一步的修改:工作小提琴
这里使用的想法是添加一个函数updateChart
,该函数获取items
然后生成图表:
var updateChart = function (items) {
// code to update the chart with new items
}
updateChart(initItems);
setTimeout(function () { updateChart(newItems); }, 2000);
这不使用您创建的arcTweenUpdate
函数,但我会尝试解释基本概念:
首先,您需要将新数据与现有数据JOIN
:
// DATA JOIN - Join new data with old elements, if any.
var gs = svg.selectAll("g").data(partition.nodes(root));
然后,如果需要,ENTER
创建新元素:
// ENTER
var g = gs.enter().append("g").on("click", click);
但是,我们还需要UPDATE
现有/新的path
,并使用新数据text
节点:
// UPDATE
var path = g.append("path");
gs.select('path')
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
})
//.on("click", click)
.each(function(d) {
this.x0 = d.x;
this.dx0 = d.dx;
})
.transition().duration(500)
.attr("d", arc);
var text = g.append("text");
gs.select('text')
.attr("x", function(d) {
return y(d.y);
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("transform", function(d) {
return "rotate(" + computeTextRotation(d) + ")";
})
.text(function(d) {
return d.name;
})
.style("fill", "white");
并且,在创建/更新所有内容后,删除未使用的g
节点,即 EXIT
:
// EXIT - Remove old elements as needed.
gs.exit().transition().duration(500).style("fill-opacity", 1e-6).remove();
Mike Bostock的以下文章中演示了整个JOIN + ENTER + UPDATE + EXIT
模式:
- 常规更新模式 - I
- 常规更新模式 - II
- 常规更新模式 - III
在小提琴的一侧,setTimeout
没有运行,因为:
d3.select(self.frameElement).style("height", height + "px");
您将收到未捕获的安全错误:无法从"窗口"读取"frame"属性:阻止了原点为"https://fiddle.jshell.net"的帧访问具有原点的帧,并且永远不会调用 setTimeout。
因此,您可以删除此行d3.select(self.frameElement).style("height", height + "px");
仅用于小提琴。
除此之外:
超时函数应如下所示:
setTimeout(function() {
//remove the old graph
svg.selectAll("*").remove();
root = newItems;
g = svg.selectAll("g")
.data(partition.nodes(newItems))
.enter().append("g");
/make path
path = g.append("path")
.attr("d", arc)
.style("fill", function(d) {
return color((d.children ? d : d.parent).name);
})
.on("click", click)
.each(function(d) {
this.x0 = d.x;
this.dx0 = d.dx;
});
//make text
text = g.append("text")
.attr("x", function(d) {
return y(d.y);
})
.attr("dx", "6") // margin
.attr("dy", ".35em") // vertical-align
.attr("transform", function(d) {
return "rotate(" + computeTextRotation(d) + ")";
})
.text(function(d) {
return d.name;
})
.style("fill", "white");
}
在这里工作小提琴
要使 enter() 和转换正常工作,您需要为 d3 提供一种方法来标识数据中的每个项目。 .data() 函数有第二个参数,它允许你返回一些东西作为 id。 Enter() 将使用 id 来决定对象是否是新的。
尝试更改
path.data(partition.nodes(newItems))
.data(partition.nodes(root));
自
path.data(partition.nodes(newItems), function(d){return d.name});
.data(partition.nodes(root), function(d){return d.name});
- d3基于用户选择动态更新节点
- 如何从相应的控制器动态更新标题和描述
- 根据CHECKBOX输入值动态更新DIV信息
- HTML动态更新滑块输入
- 如何使用ajax和jquery动态更新数组表
- 如何动态更新输入值属性
- 动态更新chartJ中的图表
- 动态更新Angular2指令中自定义属性的值
- jQuery动态更新数据键和值
- 如何在jQuery的.on()方法中动态更新按钮的ID选择器
- 使用 php/jquery 动态更新单个模态
- 在 Ionic 中动态更新滚动区域
- 具有动态更新的实时标题 (AJAX+jQuery)
- jQuery:动态更新 N 个最新值的列表
- 如何动态更新选择值
- 将URL路径与<a>attr('href')来动态更新.active类
- Jquery调整大小动态更新
- 在javascript中动态更新嵌套对象
- javascript中的文本框未正确动态更新
- 动态更新Ace Editor+Requirejs的语法高亮显示