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

问题描述

我试图在单击按钮时打开一个新窗口，并在其上画一个简单的圆圈。

I'm trying to open a new window on button click and draw a simple circle on it.

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

I can open a window but circle won't appear on it with this code. Any ideas on how to solve this.0

这是我的代码：

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

    }

}

推荐答案

调用 drawBarChart（newWindowRoot）时，您传递的是d3选择，即 d3的结果。select（newWindow .document.body）-该功能。

When you call drawBarChart(newWindowRoot), you're passing a d3 selection — the result of d3.select(newWindow.document.body) — into that function. That makes sense.

但是，在 drawBarChart 中，您调用 var sampleSVG = d3 .select（newWindowRoot），实际上是对d3选择进行d3选择。那是行不通的（不同于您可能对jQuery的期望）。您应该跳过后面的 d3.select ，这将使您的代码开始起作用。更具体地说，这将使按钮显示在新窗口中，而不显示在圆圈中。

However, from within drawBarChart, you call var sampleSVG = d3.select(newWindowRoot), essentially making a d3 selection of a d3 selection. That doesn't work (unlike what you might expect from jQuery). You should skip that latter d3.select and that'll make your code begin to work. More specifically, that'll make the button appear in the new window, but not the circle.

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

To make the circle appear, you need to fix another issue: Your fiddle attempts to add the circle to the button, instead of to an SVG (this is different than your example above which isn't trying to create a button).

这里是一个工作的小提琴

您链接的jsFiddle无法正常工作的原因是，您嵌入的链接使用的是安全协议（https），而试图加载d3的jsfiddle功能不安全（http），这导致无法加载d3，进而导致加载失败执行代码时出错。

By the way, the reason the jsFiddle you linked to didn't work is because the link you embedded was using secure protocol (https) and the jsfiddle functionality that was trying to load d3 is insecure (http), which resulted in a failure to load d3 and in turn an error executing your code.

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