使用骨幹渲染d3 SVG的基本示例查看

Question

我試圖從靜態html SVG（使用動態值）切換到動態d3 SVG在骨幹視圖中。我目前正在使用模板（並希望保持它的某些其他屬性），但不必（因爲我可以用模板將這些屬性重構爲自己的視圖）。

任何人都有一個乾淨的快速示例，就像只有一個圓圈？

Backbone和我發現的d3最接近的版本是here，但這是我想要的，並且還沒有足夠的d3經驗來理解函數調用和結構。

當前提供該問題的代碼是在視圖的渲染（）：

var pathFunction = d3.svg.line() 
     .x(function (d) {return d.x;}) 
     .y(function (d) {return d.y;}) 
     .interpolate("basis"); // bundle | basis | linear | cardinal are also options 

    //The Circle SVG Path we draw 
    var svgContainer = d3.select('#measure'+measure.cid); 

    var circle = svgContainer.append("g") 
     .append("path") 
     .data([circleStates[0]]) 
     .attr("d", pathFunction) 
     .attr("class", "circle"); 

    var compiledTemplate = _.template(this.representations[this.currentRepresentation], measureTemplateParamaters); 
    $(this.el).find('.addMeasure').before(compiledTemplate); 

基本上我試圖繪製路徑的圈子，通過已經計算的點來定義。我只是不知道如何得到它傳遞給任何模板或通過Backbone.View

控制檯錯誤時，「珠」是在this頁面選擇的DOM：

Error: Problem parsing d="function line(data) { 
    var segments = [], points = [], i = -1, n = data.length, d, fx = d3_functor(x), fy = d3_functor(y); 
    function segment() { 
    segments.push("       jquery.js:6326 
jQuery.extend.clean jquery.js:6326 
jQuery.buildFragment jquery.js:6165 
jQuery.fn.extend.domManip jquery.js:5975 
jQuery.fn.extend.before jquery.js:5795 
(anonymous function) measuresView.js:227 
_.each._.forEach underscore.js:78 
Backbone.View.extend.render measuresView.js:133 
Backbone.View.extend.changeMeasureRepresentation measuresView.js:90 
triggerEvents backbone.js:96 
Backbone.Events.trigger backbone.js:187 
Backbone.View.extend.cycle wholeMeasureRepresentationView.js:46 
jQuery.event.dispatch jquery.js:3059 
elemData.handle.eventHandle jquery.js:2677 

這是全錯誤，並且與我的代碼不匹配，導致我相信這看起來好像是在嘗試使用d3的函數並進行渲染，而不是我期望的d3返回。堆棧跟蹤最終將我導回到傳入的編譯模板（(anonymous function) measuresView.js:227），這就是我想要弄清的，如何將d3 SVG傳遞到模板中。

Answer 1

您遇到的問題在珠模板中。在模板中，您引用屬性pathFunction，該屬性是一個函數，您應該引用該函數的返回值。只需將pathFunction更改爲pathFunction()即可，假設pathFunction被寫入以返回沒有任何參數的svg路徑，您應該沒問題。如果是這樣的話，這裏就是這樣的模板應該是：

<div id="measure<%= measure.cid %>" class="measure"> 
    <div class="btn" id="a">Unroll</div> 
    <div class="btn" id="b">Rollup</div> 
    <span class="title">Measure <span class="number"><%= measureCount %></span> 
    <% if(measureCount == 1) { %> 
    <% } else { %> 
    - <span class="delete">[X]</span> 
    <% } %> 
    </span> 
    <svg id="svg<%= measure.cid %>" xmlns="http://www.w3.org/2000/svg" version="1.1" class="circular-pie"> 
    <path d="<%= pathFunction() %>" /> 
    <!-- <circle cx="<%= cx %>" cy="<%= cy %>" r="<%= measureR %>" stroke="black" stroke-dasharray="1,3" stroke-width="1" fill="none" /> --> 
    <g id="<%= beatHolder %>"> 
    </g> 
    </svg> 
</div> 

至於你想雖然達到什麼樣的，我想你，你想做的事是使一個SVG元素的一部分您的模板，然後在將HTML附加到DOM後，使用SVG元素作爲您的可視化的根，因此：

// This should be in your view's render function 
    // Render the template 
    var compiledTemplate = _.template(this.representations[this.currentRepresentation], measureTemplateParamaters); 
    // Insert the html into the DOM 
    d3.select('#someContainer').html(compiledTemplate); 
    // Then draw your visualization 
    var pathFunction = d3.svg.line() 
     .x(function (d) {return d.x;}) 
     .y(function (d) {return d.y;}) 
     .interpolate("basis"); 

    //The Circle SVG Path we draw 
    var svgContainer = d3.select('#measure'+measure.cid); 

    var circle = svgContainer.append("g") 
     .append("path") 
     .data([circleStates[0]]) 
     .attr("d", pathFunction(/*you'll need to insert some coordinate 
      information here see http://www.dashingd3js.com/svg-paths-and-d3js*/)) 
     .attr("class", "circle"); 
    // Do some other stuff 

Answer 2

我認爲這是因爲你使用相同的字符串分隔符"爲你的xml和你的函數。 JQuery試圖解析你編譯好的模板，並且無法評估在'd'屬性中停止在...segments.push(處的函數。

將segments.push("M"更改爲segments.push('M'和segments.join("")分成segments.join('')，你應該沒問題。