在D3.js中，我正在更新多折线图。我正在尝试选择图中的所有路径。但是我最终抓住了错误的道路。
我尝试了选择路径的不同方法。但是我似乎找不到正确的选择。
这是我最初设置图表的方式。
svg
.selectAll(".line")
.data(sumstat)
.enter()
.append("path")
.attr("fill", "none")
.attr("stroke", function(d) {
return color(d.key);
})
.attr("stroke-width", 1.5)
.attr("d", function(d) {
return d3
.line()
.x(function(d) {
return x(d.time);
})
.y(function(d) {
return y(+d.CPUsnapshot);
})(d.values);
});
这是我更新路径的地方。
var path = d3
.select(cssName + " svg")
.selectAll("path")
.data(sumstat);
path
.attr("fill", "none")
.attr("stroke", function(d) {
return color(d.key);
})
.attr("stroke-width", 1.5)
.attr("d", function(d) {
return d3
.line()
.x(function(d) {
return x(d.time);
})
.y(function(d) {
return y(+d.CPUsnapshot);
})(d.values);
});
这是我更新之前的HTML。
<svg viewBox="0 0 360 410"><g transform="translate(60,10)"><g transform="translate(0,360)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,6V0.5H410.5V6"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.0</text></g><g class="tick" opacity="1" transform="translate(41.50000000000932,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.1</text></g><g class="tick" opacity="1" transform="translate(82.50000000001864,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.2</text></g><g class="tick" opacity="1" transform="translate(123.49999999998136,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.3</text></g><g class="tick" opacity="1" transform="translate(164.49999999999068,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.4</text></g><g class="tick" opacity="1" transform="translate(205.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.5</text></g><g class="tick" opacity="1" transform="translate(246.50000000000932,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.6</text></g><g class="tick" opacity="1" transform="translate(287.50000000001864,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.7</text></g><g class="tick" opacity="1" transform="translate(328.49999999998136,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.8</text></g><g class="tick" opacity="1" transform="translate(369.4999999999907,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.9</text></g><g class="tick" opacity="1" transform="translate(410.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">939.0</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M-6,360.5H0.5V0.5H-6"></path><g class="tick" opacity="1" transform="translate(0,360.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,324.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">10</text></g><g class="tick" opacity="1" transform="translate(0,288.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">20</text></g><g class="tick" opacity="1" transform="translate(0,252.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">30</text></g><g class="tick" opacity="1" transform="translate(0,216.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">40</text></g><g class="tick" opacity="1" transform="translate(0,180.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">50</text></g><g class="tick" opacity="1" transform="translate(0,144.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">60</text></g><g class="tick" opacity="1" transform="translate(0,108.50000000000003)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">70</text></g><g class="tick" opacity="1" transform="translate(0,72.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">80</text></g><g class="tick" opacity="1" transform="translate(0,36.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">90</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text></g></g><path fill="none" stroke="#e6194b" stroke-width="1.5" d="M0,351.72L410,352.008"></path><path fill="none" stroke="#3cb44b" stroke-width="1.5" d="M0,148.932L410,148.60800000000003"></path><path fill="none" stroke="#ffe119" stroke-width="1.5" d="M0,332.1L410,334.404"></path><path fill="none" stroke="#4363d8" stroke-width="1.5" d="M0,290.952L410,290.952"></path><path fill="none" stroke="#f58231" stroke-width="1.5" d="M0,272.988L410,256.824"></path><path fill="none" stroke="#911eb4" stroke-width="1.5" d="M0,255.204L410,262.908"></path><path fill="none" stroke="#46f0f0" stroke-width="1.5" d="M0,267.192L410,250.344"></path></g></svg>
这是更新后的HTML。
<svg viewBox="0 0 360 410"><g transform="translate(60,10)"><g transform="translate(0,360)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="#e6194b" d="M0,351.72L205,352.008L410,351.072" fill="none" stroke-width="1.5"></path><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.0</text></g><g class="tick" opacity="1" transform="translate(41.50000000000932,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.1</text></g><g class="tick" opacity="1" transform="translate(82.50000000001864,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.2</text></g><g class="tick" opacity="1" transform="translate(123.49999999998136,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.3</text></g><g class="tick" opacity="1" transform="translate(164.49999999999068,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.4</text></g><g class="tick" opacity="1" transform="translate(205.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.5</text></g><g class="tick" opacity="1" transform="translate(246.50000000000932,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.6</text></g><g class="tick" opacity="1" transform="translate(287.50000000001864,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.7</text></g><g class="tick" opacity="1" transform="translate(328.49999999998136,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.8</text></g><g class="tick" opacity="1" transform="translate(369.4999999999907,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">938.9</text></g><g class="tick" opacity="1" transform="translate(410.5,0)"><line stroke="currentColor" y2="6"></line><text fill="currentColor" y="9" dy="0.71em">939.0</text></g></g><g fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="#3cb44b" d="M0,148.932L205,148.60800000000003L410,153.97200000000004" fill="none" stroke-width="1.5"></path><g class="tick" opacity="1" transform="translate(0,360.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">0</text></g><g class="tick" opacity="1" transform="translate(0,324.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">10</text></g><g class="tick" opacity="1" transform="translate(0,288.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">20</text></g><g class="tick" opacity="1" transform="translate(0,252.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">30</text></g><g class="tick" opacity="1" transform="translate(0,216.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">40</text></g><g class="tick" opacity="1" transform="translate(0,180.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">50</text></g><g class="tick" opacity="1" transform="translate(0,144.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">60</text></g><g class="tick" opacity="1" transform="translate(0,108.50000000000003)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">70</text></g><g class="tick" opacity="1" transform="translate(0,72.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">80</text></g><g class="tick" opacity="1" transform="translate(0,36.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">90</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="-6"></line><text fill="currentColor" x="-9" dy="0.32em">100</text></g></g><path fill="none" stroke="#ffe119" stroke-width="1.5" d="M0,332.1L205,334.404L410,334.404"></path><path fill="none" stroke="#4363d8" stroke-width="1.5" d="M0,290.952L205,290.952L410,285.48"></path><path fill="none" stroke="#f58231" stroke-width="1.5" d="M0,272.988L205,256.824L410,261.53999999999996"></path><path fill="none" stroke="#911eb4" stroke-width="1.5" d="M0,255.204L205,262.908L410,260.1"></path><path fill="none" stroke="#46f0f0" stroke-width="1.5" d="M0,267.192L205,250.344L410,249.48000000000002"></path><path fill="none" stroke="#911eb4" stroke-width="1.5" d="M0,255.204L410,262.908"></path><path fill="none" stroke="#46f0f0" stroke-width="1.5" d="M0,267.192L410,250.344"></path></g></svg>
请注意，更新图表后，两个g元素内的路径也会更新。这不应该发生。这两个g元素是x和y轴。
我在做什么错了？