在按钮上单击打开一个新窗口，并用D3绘制一个大圆圈 [英] On button click open a new window and draw a large circle with D3

问题描述

此问题在此之前已回答：在按钮上点击打开一个新窗口并用D3绘制圆形

This question has been answered before here: On button click open a new window and draw a circle with D3

作者： meetamit ：

http://jsfiddle.net/aj3g5tqg/3/

createNewPage();
function drawChart(newWindowRoot){
    var sampleSVG = newWindowRoot;
    sampleSVG
        .append("button")
        .text("hi")
        .attr("width", 100)
        .attr("height", 100);
    sampleSVG.append('svg').append("circle")
        .style("stroke", "gray")
        .style("fill", "red")
        .attr("r", 200)
        .attr("cx", 100)
        .attr("cy", 100)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});
}
function createNewPage(){
    var button = d3.select("body").append("button")
        .attr("class", "button")
        .attr("id", "myButton")
        .text("Visualize");
    document.getElementById("myButton").onclick = function () {
        var newWindow = window.open('');
        newWindowRoot = d3.select(newWindow.document.body)
            .attr("width","1060px")
            .attr("margin","50px auto");
        drawChart(newWindowRoot);
    }
}

我无法展开网格大小一个大圆，例如半径200.
我尝试改变'd3.select（newWindow.document.body）'的宽度属性，但是没有效果。

如何做到这一点？提前感谢！

I am not able to expand the grid size to draw a large circle, say of radius 200. I tried changing the width attribute of 'd3.select(newWindow.document.body)' but that had no effect.
How to do that? Thanks in advance!

推荐答案

svg 元素附加到新窗口不大小：

The svg element appended into the new window is not sized:

sampleSVG.append('svg')
    .attr('width', 500)
    .attr('height', 500) //<-- give the SVG some size
    .append("circle")
    .style("stroke", "gray")
    .style("fill", "red")
    .attr("r", 200)
    .attr("cx", 250)
    .attr("cy", 250)
    ...

已更新小提琴。

这篇关于在按钮上单击打开一个新窗口，并用D3绘制一个大圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！