html – 使用D3绘制圆圈

html – 使用D3绘制圆圈,第1张

概述以下代码用于绘制彼此相邻的五个圆圈 <head><script type='text/javascript' src='jquery-2.0.3.min.js'></script><script type='text/javascript' src='knockout-2.3.0.js'></script><script type='text/javascript' src='knockou 以下代码用于绘制彼此相邻的五个圆圈

<head><script type='text/JavaScript' src='jquery-2.0.3.min.Js'></script><script type='text/JavaScript' src='knockout-2.3.0.Js'></script><script type='text/JavaScript' src='knockout-2.3.0.Js'></script><script type='text/JavaScript' src='knockout-2.3.0.Js'></script><script src="bootstrap.min.Js"></script><!-- bootstrap --><link href="bootstrap.min.CSS" rel="stylesheet" media="screen"><link href="sticky-footer.CSS" rel="stylesheet"><script src="http://d3Js.org/d3.v3.min.Js" charset="utf-8"></script></head><body>  <div ID="viz"></div><script type="text/JavaScript">    var dataset = [],i = 0;    for(i=0; i<5; i++){        dataset.push(Math.round(Math.random()*100));    }            var sampleSVG = d3.select("#viz")        .append("svg")        .attr("wIDth",400)        .attr("height",400);        sampleSVG.selectAll("circle")        .data(dataset)        .enter().append("circle")        .style("stroke","gray")        .style("fill","black")        .attr("height",40)        .attr("wIDth",75)        .attr("x",50)        .attr("y",20);  </script> </HTML>

这不是我的代码,我只是从这个网站上复制它
http://christopheviau.com/d3_tutorial/

问题是这段代码没有绘制任何圆圈.
虽然当我尝试使用Chrome的工具检查元素时,我发现圆圈在那里,但它们不可见.

我认为原因是圆圈的白色虽然中风不是.
然而,改变颜色并不是很有用.

问题在于,Dreamweaver并没有像HTML或JavaScript那样真正起作用.

有关解决此问题的任何建议,或对编辑器的任何建议?

解决方法 看起来你举了一个例子,生成了矩形并将其改为圆形,但圆圈没有x,y,高度和宽度属性,它们有 cx,cy and radius attributes instead.

sampleSVG.selectAll("circle")    .data(dataset)    .enter().append("circle")    .style("stroke","gray")    .style("fill","black")    .attr("r",40)    .attr("cx",50)    .attr("cy",20);

将多个圆圈一个在另一个上面绘制.

总结

以上是内存溢出为你收集整理的html – 使用D3绘制圆圈全部内容,希望文章能够帮你解决html – 使用D3绘制圆圈所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1048508.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-25
下一篇 2022-05-25

发表评论

登录后才能评论

评论列表(0条)

保存