使用d3js的onclick在新選項卡中繪製圖形

Question

我有一個在我的主頁中尺寸較小的圖形，當我點擊圖形時，我希望它在新的圖形中以放大的大小打開圖形標籤。

我嘗試了以下，但它只是打開一個新的標籤，但沒有繪製任何東西。 假設vis是包含當前圖的元素，並且當點擊vis時，它應該在新窗口中繪製更大的圖。

最大值，數據和date_array都打印正確，所以沒有問題的數據。

   vis.on('click', function(){ 



       var newWindow = window.open(''); 
       console.log(data[0]); 
       console.log(date_array); 
       console.log(max_value); 
       var vis1 = d3.select(newWindow.document.body), 
        WIDTH = 400, 
        HEIGHT = 150, 
        MARGINS = { 
         top: 10, 
         right: 10, 
         bottom: 10, 
         left: 100 
        }, 
        xScale = d3.scale.ordinal().domain(date_array).rangePoints([MARGINS.left, WIDTH - MARGINS.right]), 
        yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0, max_value]), 
        xAxis = d3.svg.axis() 
        .scale(xScale) 

        yAxis = d3.svg.axis() 
        .scale(yScale); 

       vis1.append("svg:g") 
        .attr("class", "x axis") 
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")") 
        .call(xAxis) 


       vis1.append("svg:g") 
        .attr("class", "y axis") 
        .attr("transform", "translate(" + (MARGINS.left) + ",0)") 
        .call(yAxis) 

       var lineGen = d3.svg.line() 
        .x(function(d) { 
         return xScale(d.count); 
        }) 
        .y(function(d) { 
         return yScale(d.param_perc); 
        }) 
        .interpolate("basis"); 

       vis1.append('svg:path') 
        .attr('d', lineGen(data)) 
        .attr('stroke', color) 
        .attr('stroke-width', 2) 
        .attr('fill', 'none') 

        }) 

Answer 1

爲了繪製一個svg，你首先需要插入svg。您的代碼正在追加g s和path到body，但它缺少包含svg元素。這很容易通過增加

vis1 = vis1.append("svg"); 

來解決這一個歸結Plunk爲我工作。