2017-08-01 83 views
-1

我正在嘗試使用nodejs,jsdom和d3 v4來組裝和託管svg。 我寫了一個updated versionthis example,因爲它不能正常工作。但是,我不得不手動設置關閉svg標籤,因爲我不知道如何使用d3在svg的主體內添加路徑。如何使用nodejs,d3和jsdom修改基於svg的dom的內容?

如何使用d3在svg內部的例子中添加最後一個路徑?

UPDATE 1

這從updated version部設法STRUCT的SVG的主要部分。一切都被追加後,第二部分試圖unsucessfully添加路徑數據,因爲數據被追加超越收盤SVG標籤:

var document = jsdom.jsdom(); 
var svg = d3.select(document.body) 

svg.append('svg') 
    .attr('xmlns', 'http://www.w3.org/2000/svg') 
    .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink') 
    .attr('width', width + pad.l + pad.r) 
    .attr('height', height + pad.t + pad.b) 
    .append('g') 
    .attr('transform', 'translate(' + pad.l + ',' + pad.t + ')') 
    .append('g') 
    .attr('class', 'x axis') 
    .call(xAxis) 
    .append('g') 
    .attr('class', 'y axis') 
    .call(yAxis) 
    .selectAll('.axis text') 
    .style('fill', '#888') 
    .style('font-family', 'Helvetica Neue') 
    .style('font-size', 11) 
    .selectAll('.axis line') 
    .style('stroke', '#eee') 
    .style('stroke-width', 1) 
    .selectAll('.domain') 
    .style('display', 'none') 

svg.selectAll('path.samples') 
    .data([samples]) 
    .enter() 
    .append('path') 
    .attr('class', 'samples') 
    .attr('d', line) 
    .style('fill', 'none') 
    .style('stroke', '#c00') 
    .style('stroke-width', 2) 

回答

0

你必須分開您的選擇

var document = jsdom.jsdom(); 
var body = d3.select(document.body) 

var svg = body .append('svg') 
    .attr('xmlns', 'http://www.w3.org/2000/svg') 
    .attr('xmlns:xlink', 'http://www.w3.org/1999/xlink') 
    .attr('width', width + pad.l + pad.r) 
    .attr('height', height + pad.t + pad.b) 

// now we appending g element to the svg 

    var g = svg 
     .append('g') 
     .attr('transform', 'translate(' + pad.l + ',' + pad.t + ')') 

    //now we are appending container for x axis inside g 
     g.append('g') 
     .attr('class', 'x axis') 
     .call(xAxis) 

    //now we are appending container for y axis inside g 
     g 
     .append('g') 
     .attr('class', 'y axis') 
     .call(yAxis) 


    // now we are styling appended axis texts inside svg 
     svg.selectAll('.axis text') 
     .style('fill', '#888') 
     .style('font-family', 'Helvetica Neue') 
     .style('font-size', 11) 

    // now we are styling all ticks inside svg 
     svg.selectAll('.axis line') 
     .style('stroke', '#eee') 
     .style('stroke-width', 1) 

// now we are styling both line inside svg again() 
     svg.selectAll('.domain') 
     .style('display', 'none') 


    // now we are appending paths to the svg 




    svg.selectAll('path.samples') 
     .data([samples]) // if samples is array and you want to bind each element to the path, then [ ] this brackets is redundant here 
     .enter() 
     .append('path') 
     .attr('class', 'samples') 
     .attr('d', line) 
     .style('fill', 'none') 
     .style('stroke', '#c00') 
     .style('stroke-width', 2) 
+0

我得到了它幾乎工作,但現在xml頭沒有被服務器渲染(即只有g標籤等進入響應)。我無法想象當我追加內容時文檔的結構如何受到影響......這就是爲什麼我失去了正在發生的事情的原因...... – JPCF