私はネットワーク内のさまざまなクライアントで何が起こるかを表示する必要があるプロジェクトのネストバブルチャートを実装しようとしています。ここで https://bl.ocks.org/mbostock/7607535ストリーミングデータを使用して入れ子になったd3バブルチャートを更新する
私が使用していたコードです:
/// <reference path="../bower_components/dt-d3/d3.d.ts" />
var margin = 20, diameter = 960;
var color = d3.scale.linear()
.domain([-1, 4])
.range(["#ff8080", "#b30000"])
.interpolate(d3.interpolateHcl);
var pack = d3.layout.pack()
.padding(2)
.size([diameter - margin, diameter - margin])
.value(function (d) { return d.size; });
var svg = d3.select("body").select("#parent").select("#svg1").append("svg")
.attr("width", diameter)
.attr("height", diameter)
.append("g")
.attr("transform", "translate(" + diameter/2 + "," + diameter/2 + ")");
var svg2 = d3.select("body").select("#parent").select("#svg2").append("svg")
.attr("width", 100)
.attr("height", 100)
.append("g")
.attr("transform", "translate(" + margin + "," + margin + ")");
function draw(fileToRead){
console.log(fileToRead);
d3.json(fileToRead, function (error, root) {
if (error)
throw error;
var focus = root, nodes = pack.nodes(root), view;
var circle = svg.selectAll("circle").data(nodes);
circle.attr("class","update");
circle.enter().append("circle")
.attr("class", function (d) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; }) .style("fill", function (d) { return d.children ? d.children.length > 3 ? color(d.depth) : "white" : d.size > 0.02 ? "#660000" : "#003366"; })
.style("fill", function (d) { return d.children ? "white" : d.size > 0.02 ? "#660000" : "#003366"; })
.on("click", function (d) { if (focus !== d)
zoom(d), d3.event.stopPropagation(); });
circle.exit().remove();
var text = svg.selectAll("text").data(nodes);
text.attr("class","update");
text.enter().append("text")
.attr("class", "label")
.style("fill-opacity", function (d) { return d.parent === root ? 1 : 0; })
.style("display", function (d) { return d.parent === root ? "inline" : "none"; })
.style("fill", "black")
.text(function (d) { return d.name; });
text.exit().remove();
var node = svg.selectAll("circle,text");
d3.select("body")
.style("background", color(-1))
.on("click", function() { zoom(root); });
zoomTo([root.x, root.y, root.r * 2 + margin]);
function zoom(d) {
var focus0 = focus;
focus = d;
if (focus.depth == 2) {
circle2.style("fill", "white");
} else {
circle2.style("fill", "black");
}
var transition = d3.transition()
.duration(d3.event.altKey ? 7500 : 750)
.tween("zoom", function (d) {
var i = d3.interpolateZoom(view, [focus.x, focus.y, focus.r * 2 + margin]);
return function (t) { zoomTo(i(t)); };
});
transition.selectAll("text")
.filter(function (d) { return d.parent === focus || this.style.display === "inline"; })
.style("fill-opacity", function (d) { return d.parent === focus ? 1 : 0; })
.each("start", function (d) { if (d.parent === focus)
this.style.display = "inline"; })
.each("end", function (d) { if (d.parent !== focus)
this.style.display = "none"; });
}
function zoomTo(v) {
var k = diameter/v[2];
view = v;
node.attr("transform", function (d) { return "translate(" + (d.x - v[0]) * k + "," + (d.y - v[1]) * k + ")"; });
circle.attr("r", function (d) { return d.r * k; });
}
});
}
d3.select(self.frameElement).style("height", diameter + "px");
私は継続的にUIに新しいデータをストリーミングするときに私が遭遇しています問題がある私はで示した例を使用していました。たびに私はデータベースにあるすべてのデータを含む完全なjsonファイルで "Draw"を呼び出します。私は、enter()、exit()、remove()がDOM要素の更新を担当していると読んだことがありますが、何か不足しているようです。 draw()関数が呼び出されると、既存のものの上に気泡が描かれ、円の境界線の色やテキストの境界線の色が消えるように見えます。 私はenter()とexit()コマンドを正しい方法で使用しているのだろうかと思います。私はdraw()関数がjsonファイルを受け取って、新しいバブルグラフの情報のみを更新し、DOM要素が存在しないようにしたいと思いますが、すべてのDOM要素を再作成するようです。私は左側を示す追加情報をバブルグラフと右側によって占有されている2つの画面を分割しようとしていますbecase私は2つのSVGのを持っている:
は、事前に ゲオルギ
PSをありがとう私たちは、内部の気泡
EDIT1でそれをズーム:ここ
{"name": "",
"children":
[{"name": "10.0.0.64", "children":
[{"name": "unidentified", "children":
[{"name": "datasource", "size": 0.002551020408163265}, {"name": "datasource", "size": 0.0031746031746031746}, {"name": "datasource", "size": 0.0017123779389460522}, {"name": "average", "size": 0.008550406895439414}, {"name": "datasource", "size": 0.019020266320109332}]},
{"name": "www.quefaire.be", "children":
[{"name": "average", "size": 0.002270490544565449}, {"name": "datasource", "size": 0.023243328100470965}]}, {"name": "tnsinternet.be", "children": [{"name": "average", "size": 0.002199967070440535}, {"name": "datasource", "size": 0.022009167303284966}]},
{"name": "hy.sachinese.com", "children":
[{"name": "average", "size": 0.0022121416372369493}, {"name": "datasource", "size": 0.022222222222222223}]}, {"name": "pagesdor.be", "children": [{"name": "average", "size": 0.0030411250824668935}, {"name": "datasource", "size": 0.03672943251374624}]},
{"name": "r.254a.com", "children":
[{"name": "average", "size": 0.0018942905665264935}, {"name": "datasource", "size": 0.015873015873015872}]},
{"name": "i.ctnsnet.com", "children":
[{"name": "average", "size": 0.0018942905665264935}, {"name": "datasource", "size": 0.015873015873015872}]},
{"name": "link.carrefour.eu", "children":
[{"name": "average", "size": 0.0019793245801319357}, {"name": "datasource", "size": 0.017857142857142856}]},
{"name": "goudengids.be", "children":
[{"name": "average", "size": 0.00457041828122788}, {"name": "datasource", "size": 0.06349206349206349}]}, {"name": "www.inmemoriam.be", "children": [{"name": "average", "size": 0.0018443560093702978}, {"name": "datasource", "size": 0.014707876206037973}]},
{"name": "www1.gfk-wi.com", "children":
[{"name": "datasource", "size": 0.011986645572622365}, {"name": "average", "size": 0.0017277318393667718}]}, {"name": "bootstrapcdn.com", "children": [{"name": "average", "size": 0.008550406895439414}, {"name": "datasource", "size": 0.13314186424076532}]},
{"name": "maxcdn.bootstrapcdn.com", "children":
[{"name": "datasource", "size": 0.031746031746031744}, {"name": "average", "size": 0.0027563593243117796}]}]}]}
私のCSSもされています:ここで私は引き分け()関数に渡すデータのサンプルがある
.svg-container {
display: flex;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
.container {
float: left;
}
.node {
cursor: pointer;
stroke: darkgrey;
}
.node:hover {
stroke: #000;
stroke-width: 1.5px;
}
.node--leaf {
fill: white;
}
.label {
font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
text-anchor: middle;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
}
.label,
.node--root,
.node--leaf {
pointer-events: none;
}
あなたも、あなたがそうである 'アップデート()'関数を呼び出していないようですが、また見え 'fileToRead' – Cyril
から取得されたデータの標本を提供することができます(潜在的に関連する)問題を引き起こします。 – JSBob
@CyrilデータのサンプルとCSSをウェブサイトのサンプルで更新しました –