首頁(yè) 猿問(wèn) javascript D3...

javascript D3 V6，與鏈?zhǔn)秸Z(yǔ)法作斗爭(zhēng)，特別是'.call'和'selectAll'

JavaScript

當(dāng)年話下 2023-05-11 16:44:48

下面是兩個(gè)類似 D3 代碼的示例，一個(gè)有效，另一個(gè)無(wú)效。在此示例中，我想更改軸的線條顏色 -這不起作用，軸的描邊顏色線不會(huì)更改為綠色 - var x_axis = svg.append("g") .attr("class", "axis") .attr("transform", `translate(20, ${height - 50})`) .call(d3.axisBottom(ordinalScale)) .selectAll("text") .attr("transform", "translate(-5,5)rotate(-45)") .style("text-anchor", "end") .style("font-size", "8px") .style("fill", "#102040"); x_axis.selectAll("line, path").style("stroke", "green");但這有效，線條變?yōu)榫G色： var x_axis = svg.append("g") .attr("class", "axis") .attr("transform", `translate(20, ${height - 50})`) .call(d3.axisBottom(ordinalScale)); x_axis.selectAll("text") .attr("transform", "translate(-5,5)rotate(-45)") .style("text-anchor", "end") .style("font-size", "8px") .style("fill", "#102040"); x_axis.selectAll("line, path").style("stroke", "green");不同之處在于，在第一個(gè)（失敗的）示例中，我將 'selectAll("text")' 操作鏈接到 'call(d3.axisBottom)' 和以下 'selectAll("line, path")' 操作表達(dá)式，在第二個(gè)（成功的）示例中，我對(duì)每個(gè)文本和行/路徑操作都有以下單獨(dú)的表達(dá)式。這并不重要，因?yàn)槲铱梢垣@得我想要的效果，但在我看來(lái)它們應(yīng)該是等效的，但顯然我不理解語(yǔ)法的一些微妙之處。這與“.call”操作有關(guān)嗎？

查看完整描述

1 回答

海綿寶寶撒

TA貢獻(xiàn)1809條經(jīng)驗(yàn) 獲得超8個(gè)贊

第一個(gè)代碼塊不起作用，因?yàn)閤_axis它不包含您認(rèn)為的內(nèi)容。

var x_axis = svg.append("g") // returns a selection of a g element

.attr("class", "axis") // returns the same selection of a g

...

.call(d3.axisBottom(ordinalScale)) // returns the same selection of a g

.selectAll("text") // returns a new selection of text elements

...

.style("fill", "#102040"); // returns the same selection of text elements

x_axis由鏈返回的最后一個(gè)值定義。因此， x_axis上面是文本元素的選擇，文本元素不能（在本例中不）包含任何子路徑或行元素，因此x_axis.selectAll('line, path')將返回空選擇。因此，為空選擇設(shè)置任何屬性都不會(huì)改變?nèi)魏蝺?nèi)容。

第二個(gè)代碼塊之所以有效，是因?yàn)閤_axis它仍然是 ag 的選擇 - 返回鏈接到的相同selection.call()內(nèi)容，例如or ，以及其他方法。而和，以及其他方法，返回新的選擇。selection.call().attr().style()selectAll()select()

反對(duì) 回復(fù) 2023-05-11