Question

我试图在按钮点击上打开一个新窗口并在其上绘制一个简单的圆圈。

我可以打开一个窗口，但是这个代码不会出现圆圈。关于如何解决这个问题的任何想法。

这是我的代码：

function drawBarChart(newWindowRoot){
    var sampleSVG = d3.select(newWindowRoot)
        .append("svg")
        .attr("width", 100)
        .attr("height", 100);

    sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
        .on("mouseout", function(){d3.select(this).style("fill", "white");});
}
function createNewPage(){

    var button = content.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");

        drawBarChart(newWindowRoot);

    }

}

Answer 1

当您致电drawBarChart(newWindowRoot)时，您将d3选择 - d3.select(newWindow.document.body)的结果 - 传递给该功能。这是有道理的。

但是，从drawBarChart开始，您调用var sampleSVG = d3.select(newWindowRoot)，基本上选择d3作为d3。这不起作用（不像你对jQuery的期望）。您应该跳过后者d3.select，这将使您的代码开始工作。更具体地说，这将使按钮出现在新窗口中，而不是圆圈。

要显示圆圈，您需要修复另一个问题：您的小提琴尝试将圆圈添加到按钮而不是SVG（这与您上面的示例不同，后者并未尝试创建按钮）。

Here's a working fiddle

顺便说一句，你链接的jsFiddle没有工作的原因是因为你嵌入的链接使用的是安全协议（https），而试图加载d3的jsfiddle功能是不安全的（http），导致无法加载d3，从而导致执行代码时出错。

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

1 个答案: