亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

javascript D3 V6,與鏈式語法作斗爭,特別是'.call'和'selectAll'

javascript D3 V6,與鏈式語法作斗爭,特別是'.call'和'selectAll'

當年話下 2023-05-11 16:44:48
下面是兩個類似 D3 代碼的示例,一個有效,另一個無效。在此示例中,我想更改軸的線條顏色 -這不起作用,軸的描邊顏色線不會更改為綠色 -   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");但這有效,線條變為綠色:   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");不同之處在于,在第一個(失敗的)示例中,我將 'selectAll("text")' 操作鏈接到 'call(d3.axisBottom)' 和以下 'selectAll("line, path")' 操作表達式,在第二個(成功的)示例中,我對每個文本和行/路徑操作都有以下單獨的表達式。這并不重要,因為我可以獲得我想要的效果,但在我看來它們應該是等效的,但顯然我不理解語法的一些微妙之處。這與“.call”操作有關嗎?
查看完整描述

1 回答

?
海綿寶寶撒

TA貢獻1809條經驗 獲得超8個贊

第一個代碼塊不起作用,因為x_axis它不包含您認為的內容。


  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由鏈返回的最后一個值定義。因此, x_axis上面是文本元素的選擇,文本元素不能(在本例中不)包含任何子路徑或行元素,因此x_axis.selectAll('line, path')將返回空選擇。因此,為空選擇設置任何屬性都不會改變任何內容。


第二個代碼塊之所以有效,是因為x_axis它仍然是 ag 的選擇 - 返回鏈接到的相同selection.call()內容,例如or ,以及其他方法。而 和,以及其他方法,返回新的選擇。selection.call().attr().style()selectAll()select()


查看完整回答
反對 回復 2023-05-11
  • 1 回答
  • 0 關注
  • 170 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號