d3分類/使用多個ID的樣式

雖然多個類可以分配給一個ID，但是可以將多個ID分配給一個類嗎？如果是，那麼我將節省大量的時間/計算資源。d3分類/使用多個ID的樣式

我嘗試：以這種方式

d3.select('#id1','#id2').classed('my_class',true);

我也試過JS造型：

d3.select('#id1','#id2').style('display','none');

只有第一個ID的作品。

有沒有一種簡潔的方式來處理這種情況？如果在某種形狀或形式中沒有解決方法，我會感到驚訝。在這種情況下，我找不到一個。

來源

2017-03-23 Arash Howaida

如果D3使用CSS/jQuery的喜歡選擇它的可能只是'd3.select（'＃id1，＃id2'）'編輯它們[D3選擇元素]（https://github.com/d3/d3-selection#selecting-elements） –

有趣的想法。我剛剛嘗試過，沒有骰子。必須與jquery –

略有不同所以如果我理解正確，你想將一些樣式應用於id爲id1，id2，id3 ...'的多個元素？ – sparta93

問題下面的意見已全部信息來解決問題。但是，對於未來的讀者，我想在這裏寫一些觀點。首先：總是閱讀documentation。除了少數例外，它擁有您需要的所有信息。例如，讓我們來看看它說約select：

選擇指定的選擇串匹配第一元素。（重點礦）

現在讓我們看看你的代碼：

d3.select('#id1','#id2') 
//    ^--------- two strings, separated by a comma

這不是一個字符串。這是一個字符串：

d3.select('#id1, #id2') 
//    ^--------- just one string here!

問題二：select選擇該字符串匹配的第一元件。所以，你需要selectAll，而不是select。

解決方案：它必須是：

d3.selectAll("#id1, #id")

這裏是一個演示，點擊按鈕：

d3.select("button").on("click", function() { 
 
    d3.selectAll("#c2, #c5").attr("fill", "brown"); 
 
})

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<button>Click me</button> 
 
<svg> 
 
    <circle id="c1" cx="20" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c2" cx="60" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c3" cx="100" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c4" cx="140" cy="30" r="10" fill="teal"></circle> 
 
    <circle id="c5" cx="180" cy="30" r="10" fill="teal"></circle> 
 
</svg>

來源

2017-03-23 22:51:11

由於OP特別關注性能問題，值得注意的是，這種方法遠遠超出了Nobita提出的解決方案[答案]（http://stackoverflow.com/a/42986738/4235784）。儘管如此，儘管如此，這看起來更清潔，更直觀，並且 - 像往常一樣 - 有一個很好的解釋。 – altocumulus

@altocumulus感謝您的讚賞，但 - 令人驚訝的是？ - 我認爲Gerardo的方法可能更具性能。而不是多次選擇，最好選擇一次，這就是selectAll所做的，因爲它使用querySelectorAll（參見[這裏]（https://github.com/d3/d3-selection/blob/master/src/） select/selectAll.js）和[here]（https://github.com/d3/d3-selection/blob/master/src/selectorAll.js#L7）。另外，它對D3更具慣用，因此我提出了他的答案。 – Nobita

@Nobita儘管這看起來很合理，但你的方法實際上比Gerardo更快。在Chrome上執行我的[性能測試]（https://jsperf.com/d3-multi-select-by-id），實現您的答案的測試用例＃2比此答案的方法快十倍以上。使用本地'document.getElementById（）'替換內部選擇將進一步加倍該速度。結果因瀏覽器而異，瀏覽器* esque * IE 11是最慢的，但都比使用複雜的選擇器字符串更快。 – altocumulus

您可以將您的ID在數組中，並映射在它

var ids = ['#g1', '#g2'] 

ids.map(el => d3.select(el).classed('red', true))

見here或這裏下面：

var ids = ['#g1', '#g2'] 
 

 
ids.map(el => d3.select(el).classed('red', true));

div { 
 
    display: inline-block; 
 
    height: 20px; 
 
    width: 300px; 
 
    background: teal; 
 
} 
 

 
.red { 
 
    background: red; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="g1"></div> 
 
<div id="g2"></div> 
 
<div id="g3"></div> 
 
<div id="g4"></div>

來源

2017-03-23 20:51:16 Nobita

d3分類/使用多個ID的樣式

回答

相關問題