使用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为我工作。