点击按钮打开一个新窗口，用D3画一个大圆

On button click open a new window and draw a large circle with D3

本文关键字：一个 D3 窗口 按钮 新窗口      更新时间：2023-09-26

这个问题以前在这里已经回答过了：点击按钮打开一个新窗口，用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.docent.body）"的宽度属性，但没有效果
如何做到这一点？提前感谢！

附加到新窗口中的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)
    ...

更新的小提琴。

相关文章：