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和path附加到body，但它缺少包含svg元素。这可以通过添加

轻松解决

vis1 = vis1.append("svg");

这对我来说很有用Plunk。

使用onclick d3js在新选项卡中绘制图形

1 个答案: