在knockout和breeze中添加D3的svg元素

Question

我在SPA上使用棒约翰的Todo示例。我想做的是添加一个svg元素使用D3.js饼状图。

我可以将饼状图添加到body标记，但如果我将其更改为另一个标记，它将不呈现。我想把它添加到这个id #thegraph。

home.js

define(['services/logger'], function (logger) {
    var vm = {
        activate: activate
    };
    //#region Internal Methods
    function activate() {
        // Do the graph
        return doGraph();
    }
    function doGraph() {
        //Width and height
        var w = 300;
        var h = 300;
        var outerRadius = w / 2;
        var innerRadius = w / 3;
        var arc = d3.svg.arc()
                        .innerRadius(innerRadius)
                        .outerRadius(outerRadius);
        var pie = d3.layout.pie();
        //Easy colors accessible via a 20-step ordinal scale
        var color = d3.scale.category20();
        //Create SVG element
        var svg = d3.select("#thegraph") // This only works if I change #thegraph to body
            .append("svg")
            .attr("width", w)
            .attr("height", h);
    }
    //#endregion
    return vm;
});

home。

<section>
    <div class="thegraph" id="thegraph"></div>
</section>

Answer 1

我打赌你在html呈现之前调用javascript(你在html页面的标题中包含javascript文件吗?)

有两个解决方案:

1. 在定义标签(页脚)后加载渲染图形的脚本
2. 把你的调用放在像$(function() {...})这样的东西里面，这是jQuery.ready()函数的快捷方式。