次のコードには、1つのd3.jsプロットに複数のパスがあります。最初のプロットが機能し、データセットが表示されていd0
ます。ロード時には次のようになります。
d1
ボタンを押したときにデータを表示したいので、次のようになります。
現在起こっていることは...何もありません。コンソールにエラーはなく、表示も変更されず、DOMも変更されていません(私にはわかりますか?)。
私は12のコード例とチュートリアルを経験しましたが、ここで何が問題になっているのかわかりません。どんな助けでも大歓迎です(特に私が概念的に欠けているものの説明がある場合)。ありがとう!
var d0 = [{
id: "A",
values: [{
x: .25,
y: .9
}, {
x: .75,
y: 1
}]
},
{
id: "B",
values: [{
x: .25,
y: .5
}, {
x: .8,
y: .4
}]
},
{
id: "C",
values: [{
x: .1,
y: .1
}, {
x: .9,
y: .1
}]
}
]
var d1 = [{
id: "A",
values: [{
x: 0,
y: 1
}, {
x: 1,
y: 1
}]
},
{
id: "B",
values: [{
x: 0,
y: .5
}, {
x: 1,
y: .5
}]
},
{
id: "C",
values: [{
x: 0,
y: 0
}, {
x: 1,
y: 0
}]
}
]
var svg = d3.select("svg")
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
}
var width = svg.attr("width") - margin.left - margin.right
var height = svg.attr("height") - margin.top - margin.bottom
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var scaleX = d3.scaleLinear().range([0, width]).domain([0, 1])
var scaleY = d3.scaleLinear().range([height, 0]).domain([0, 1])
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(scaleX));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(scaleY))
var line = d3.line()
.x(function(d) {
return scaleX(d.x)
})
.y(function(d) {
return scaleY(d.y)
});
var lineg = g.selectAll(".lineg")
.data(d0)
.enter()
.append("g")
.attr("class", "lineg");
lineg.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values)
})
function update() {
var i = g.selectAll(".lineg")
.data(d1)
i.enter()
.append("g")
.attr("class", "lineg")
i.exit()
.remove()
g.selectAll(".line")
.attr("d", function(d) {
return line(d.values)
})
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
<br/>
<button onclick="update()">Change</button>
呼び出す.data
または呼び出すすべてのSVG要素.datum
には、データオブジェクトへの内部参照があります。更新呼び出しでg
、行を保持している要素のデータを更新しましたが、行自体のデータは更新していません。
私は次のコードでそれを行うことができました:
i.select(".line")
.datum(function(d) {
return d;
})
.attr("d", function(d) {
return line(d.values)
})
ここでは、i
すでに正しいデータを提供している、新しく選択したグループから始めて、行を選択g
し、関数を介して直接データムオブジェクトを渡します。このようにして、データムオブジェクトが更新され、呼び出しline(d.values)
は実際にはのd1
代わりにからのエントリを使用するようになりましたd0
。
var d0 = [{
id: "A",
values: [{
x: .25,
y: .9
}, {
x: .75,
y: 1
}]
},
{
id: "B",
values: [{
x: .25,
y: .5
}, {
x: .8,
y: .4
}]
},
{
id: "C",
values: [{
x: .1,
y: .1
}, {
x: .9,
y: .1
}]
}
]
var d1 = [{
id: "A",
values: [{
x: 0,
y: 1
}, {
x: 1,
y: 1
}]
},
{
id: "B",
values: [{
x: 0,
y: .5
}, {
x: 1,
y: .5
}]
},
{
id: "C",
values: [{
x: 0,
y: 0
}, {
x: 1,
y: 0
}]
}
]
var svg = d3.select("svg")
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
}
var width = svg.attr("width") - margin.left - margin.right
var height = svg.attr("height") - margin.top - margin.bottom
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")")
var scaleX = d3.scaleLinear().range([0, width]).domain([0, 1])
var scaleY = d3.scaleLinear().range([height, 0]).domain([0, 1])
g.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(scaleX));
g.append("g")
.attr("class", "axis axis--y")
.call(d3.axisLeft(scaleY))
var line = d3.line()
.x(function(d) {
return scaleX(d.x)
})
.y(function(d) {
return scaleY(d.y)
});
var lineg = g.selectAll(".lineg")
.data(d0)
.enter()
.append("g")
.attr("class", "lineg");
lineg.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values)
})
function update() {
var i = g.selectAll(".lineg")
.data(d1)
i.enter()
.append("g")
.attr("class", "lineg")
i.exit()
.remove()
i.select(".line")
.datum(function(d) {
return d;
})
.attr("d", function(d) {
return line(d.values)
})
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>
<svg width="500" height="300"></svg>
<br/>
<button onclick="update()">Change</button>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加