Basic example of rendering a d3 SVG with a backbone View - backbone.js

Question

I am trying to switch from static html SVGs (with dynamic values) to dynamic d3 SVGs in a Backbone view. I am currently using templates (and would prefer to keep it that way for some of the other properties), but don't have to (as I can refactor those properties into their own view with template).
Anyone have a clean quick example, like with just a circle ?
The closest version of Backbone and d3 I found is here, but this is what I want to get to, and don't have enough d3 experience yet to understand the function calls and structure yet.
The code that is currently providing the problem is in the render() of the View :
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 );
basically I am trying to draw a circle with a path, defined by already computed points. I just don't know how to get it passed to either the template or the DOM via the Backbone.View
Console Error when "Bead" is selected on this page:
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
This is the full error , and doesn't match my code, leading me to believe this seems like it is trying to take d3's function and render that, not what I expect d3 to return. The stack trace eventually leads me back to the compiledTemplate that gets passed in ((anonymous function) measuresView.js:227), and that is what I am trying to figure out, How to pass the d3 SVG into the template.

Answer 1

The issue your having is in the bead template. In the template you reference the property pathFunction, which is a function, where you should be referencing the return value of that function. Just change pathFunction to pathFunction() and you should be fine assuming that the pathFunction is written to return an svg path without any arguments. If that is the case, here is the way the template should look:
<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>
As far as what you are trying to achieve though, I think you what you want to do is to render an SVG element as part of your template, then after appending the HTML to the DOM, use the SVG element as the root of your visualization, so:
// 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

I think it's because you're using the same string delimiter " for your xml and inside your function. JQuery tries to parse your compiled template and fails to evaluate the function in the 'd' attribute that stops at ...segments.push(.
Change segments.push("M" into segments.push('M' and segments.join("") into segments.join('')and you should be fine.