Javascript d3 svg圆在x，y上的放置_Javascript_Asp.net Mvc_D3.js_Svg

Javascript d3 svg圆在x，y上的放置

javascript asp.net-mvc d3.js svg

Javascript d3 svg圆在x，y上的放置,javascript,asp.net-mvc,d3.js,svg,Javascript,Asp.net Mvc,D3.js,Svg,我对d3非常陌生，对svg对象也没有太多经验，我正在尝试将d3生成的圆圈元素放在页面上。我已经学习了几个不同的教程，并将它们混合在一起，不明白为什么我当前的代码不能工作。下面是html <body> <div id="svgDiv"></div> <script src="~/Scripts/jQuery/jquery-1.10.2.min.js"></script> <script src="~/scripts/d3/d3.m

我对d3非常陌生，对svg对象也没有太多经验，我正在尝试将d3生成的圆圈元素放在页面上。我已经学习了几个不同的教程，并将它们混合在一起，不明白为什么我当前的代码不能工作。下面是html

<body>
<div id="svgDiv"></div>

<script src="~/Scripts/jQuery/jquery-1.10.2.min.js"></script>
<script src="~/scripts/d3/d3.min.js"></script>
<script src="~/scripts/App/test.js"></script>

</body>

所以这应该（并且确实）在x和y=50100150处单击时生成5个svg圆圈。。。250但所有5个圆圈都位于页面左上角的每个圆圈之上

对这种行为的任何洞察都将不胜感激，我的主要语言是C#.net，d3目前似乎并不适合我

提前谢谢

请回答这个问题。（@Gerardo已经在评论中提到了这一点。）

使用属性

cx

和

cy

来定位SVG圆，而不是

和

。（见附件）如下：

在该问题的单击事件中，您将看到如下圆圈，而不是位于彼此上方：

如果您有

attr（“x”，函数…

更改为

cx

，与

相同，更改为

cy

，并删除这两个

.attr（“cx”，20）.attr（“cy”，20）

最后。另外，由于您是D3新手，这里有一条免费建议：不要将D3和jQuery混用！！！明白了！非常感谢您，显然我需要再次回顾一下圆上cy和y的区别。感谢您的建议，我将删除jQuery！是的，请这样做！使用jQuery处理jQuery内容，使用D3处理D3内容…jQuery a的混合nd D3让我头疼！：-）

var windowWidth = $(window).width();
var windowLength = $(window).height();

var yPos = [50, 100, 150, 200, 250];

var base = d3.select("#svgDiv").append("svg")
  .attr("width", windowWidth)
  .attr("height", windowLength);


$(document).ready(function () {

windowWidth = $(window).width();
windowLength = $(window).height();

base.attr("width", windowWidth)
    .attr("height", windowLength);
document.body.style.overflow = 'hidden';

});

$(window).resize(function () {

windowWidth = $(window).width();
windowLength = $(window).height();
base.attr("width", windowWidth)
   .attr("height", windowLength);

});


$("div").click(function (e) {

base.selectAll("circle")
    .data(yPos)
    .enter()
    .append("circle")
    .attr("x", function (d, i) {
        return yPos[i];
    })
    .attr("y", function (d, i) {
        return yPos[i];
    })
    .attr("cx", 20)
    .attr("cy", 20)
    .attr("r", 20)
    .style("fill", "00ACCD");

console.log("click works");
});