向D3添加模板

http://bl.ocks.org/JohnBerryman/2295155 向D3添加模板

這是我試圖向D3添加模板的嘗試。我在Inkscape中繪製了原始面部，然後將SVG轉換爲iCanHaz模板，並使模板變量對應於面部測量。這樣我就可以定義一張臉部（以及其他任何擴展），並且我可以輕鬆實例化臉部，甚至通過更新綁定到臉部對象的數據來更改臉部。代碼的第一部分（如果你滾過該演示）是D3的補丁，然後代碼的其餘部分使用該補丁。

不幸的是，我從來沒有對此做過很好的測試，並向Bostock先生提交了請求。

問題：

我還是新來D3。這是否可以在D3中完成，我只是不知道。
這通常有用嗎？值得提交拉請求嗎？
它是d3-esque？這裏的代碼是否代表適用於d3的代碼？

來源

2013-02-23 JnBrymn

@meetamit是正確的方式，但你必須使用polyfill在SVG上應用d3.select.html方法。此方法使用innerHTML，並且在SVG元素上不受支持。檢查 d3.select.html reference

My solution on bl.ocks

來源

2013-11-06 01:10:19 jkutianski

我發現'真'作爲'ich.head（d，真）'的第二個參數不是需要。 – jkutianski 2013-11-07 06:36:59

我還沒有專門與ICanHaz合作過（儘管模板一般工作很多），所以我可能會失去一些至關重要的東西。但是，在我看來，擴展D3對此沒有必要。

考慮到編譯模板（ICH或其他方式）僅僅是返回的HTML功能，你可能只是這樣做：

vis.selectAll('.head').data(data) 
    .enter() 
    .append('g') 
    .attr('class', 'head') 
    .html(ich.head) // <--- THIS 
    .attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'});

這將調用ich.head的每一個元素，傳遞d和i。所以除非i進入一個模板導致不良行爲，否則我相信你會得到相同的結果。

如果通過i將進入ICH模板是一個問題，解決方法是

.html(function(d,i) { return ich.head(d); })

來源

2013-02-25 18:59:36 meetamit

這似乎是個好主意，但我得到的錯誤，當我嘗試它。 'Uncaught TypeError：Object [object Array] has no method'html'' – JnBrymn 2013-02-25 19:53:41

@JohnBerryman我的壞...忘了你需要在調用'.html（）'之前追加一個元素。我修改了我的代碼以顯示此內容。我想其中的區別在於：您對D3的修改不需要添加節點（和「head」類）。儘管如此，我仍然認爲它沒有理由修改D3，但你可以把它與Bostock先生:) – meetamit 2013-02-25 20:05:25

@ meetamit的答案是大多正確。然而，爲了使這項工作正常，我不得不使用iCanHaz模板的原始的HTML輸出，它需要一個略有不同的呼叫ICH：

vis.selectAll('.head').data(data) 
.enter() 
.append('g') 
.attr('class', 'head') 
.html(function(d){ return ich.head(d, true); }) // <--- THIS 
.attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'});

通知「真正」的參數，它告訴ICH返回HTML而不是對象。

來源

2013-10-18 19:13:11

向D3添加模板

回答

相關問題