Javascript 用D3在鼠标位置单击绘制圆形_Javascript_Html_D3.js_Svg

Javascript 用D3在鼠标位置单击绘制圆形

javascript html d3.js svg

Javascript 用D3在鼠标位置单击绘制圆形,javascript,html,d3.js,svg,Javascript,Html,D3.js,Svg,我正在尝试与D3一起开发一个简单的web应用程序。我对D3（以及一般的web应用程序）是新手，但目前的目标是在单个Div中单击的任何位置画一个圆圈。我正在按照教程画我的圆圈。但是，在添加此代码后，我不会出现黑色圆圈。我把代码贴在下面。。。有什么我遗漏的吗？（顺便说一句，控制台日志工作正常） html: 您忘记了使用#来指示这是一个html id 看这里（）就是这样！我对html有点陌生，那么什么时候我需要使用？另外，作为一个后续问题，我试图让这些圆只出现在我创建的“div”中，但在正确插入第一个

我正在尝试与D3一起开发一个简单的web应用程序。我对D3（以及一般的web应用程序）是新手，但目前的目标是在单个

Div

中单击的任何位置画一个圆圈。我正在按照教程画我的圆圈。但是，在添加此代码后，我不会出现黑色圆圈。我把代码贴在下面。。。有什么我遗漏的吗？（顺便说一句，控制台日志工作正常）

html:

您忘记了使用

来指示这是一个html id

看这里（）

就是这样！我对html有点陌生，那么什么时候我需要使用

？另外，作为一个后续问题，我试图让这些圆只出现在我创建的“div”中，但在正确插入第一个后，它们被放置在“div”下面。。。这有什么原因吗？

<!DOCTYPE html>
<html>
<head>
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="../css/topo_creator.css" media="screen" />
    <script src="../javascript/graph.js" type="text/javascript"></script> 
</head>
<body>
    <div class="view_graph" id="graph" onclick="graphClicked(event);">

    </div>
</body>

function graphClicked(event) {
var x = event.pageX;
var y = event.pageY;

var offsetX = document.getElementById('graph').offsetLeft;
var offsetY = document.getElementById('graph').offsetTop;

var divWidth = document.getElementById('graph').clientWidth;
var divHeight = document.getElementById('graph').clientHeight;

var svg = d3.select('graph').append('svg')
            .attr('width', divWidth)
            .attr('height', divHeight);

var circle = svg.append('circle')
                .attr('cx', (x - offsetX))
                .attr('cy', (y - offsetY))
                .attr('r', 20);

console.log('clicked: ' + (x - offsetX) + ' , ' + (y - offsetY));
}

var svg = d3.select('#graph').append('svg')
            .attr('width', divWidth)
            .attr('height', divHeight);