使用骨干渲染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('')，你应该没问题。