1

我正在尝试在主干视图中从静态 html SVG（具有动态值）切换到动态 d3 SVG。我目前正在使用模板（并且希望对其他一些属性保持这种方式），但不必这样做（因为我可以使用模板将这些属性重构到他们自己的视图中）。

任何人都有一个干净的快速示例，比如只有一个圆圈？

我找到的最接近的 Backbone 和 d3 版本在这里，但这是我想要达到的，并且还没有足够的 d3 经验来理解函数调用和结构。

当前提供问题的代码位于 View 的 render() 中：

    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 将其传递给模板或 DOM

在此页面上选择“Bead”时出现控制台错误：

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 传递到模板中。

4

2 回答 2

2

您遇到的问题是在珠模板中。在模板中，您引用 property 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
于 2013-04-30T22:09:00.610 回答
0

我认为这是因为您在"xml 和函数内部使用了相同的字符串分隔符。JQuery 尝试解析您编译的模板，但无法评估在 .d 处停止的 'd' 属性中的函数...segments.push(。

换成和segments.push("M"成，你应该没问题。segments.push('M'segments.join("")segments.join('')

于 2013-04-30T06:41:04.947 回答