Question

此问题已在此处得到解答：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。我尝试更改＆＃39; d3.select（newWindow.document.body）＆＃39;的宽度属性。但这没有效果。
怎么做？提前谢谢！

Answer 1

新窗口中附加的svg元素未调整大小：

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)
    ...

更新了fiddle。

在按钮上单击打开一个新窗口并用D3绘制一个大圆圈

1 个答案: