javascript - 使用 d3js 的 onclick 在新选项卡中绘制图表

Question

我的主页上有一个尺寸很小的图，当我单击该图时，我希望它在新选项卡中以放大的尺寸打开该图。

我尝试了以下操作，但它只是打开一个新选项卡，但没有绘制任何内容。 假设 vis 是包含当前绘图的元素，当单击 vis 时，它应该在新窗口中绘制更大的相同图形。

max value、data、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 和 path 附加到 body 中，但缺少包含的 svg 元素。这可以通过添加轻松解决

vis1 = vis1.append("svg");

这对我来说很有效 Plunk .