Javascript D3中的多个椭圆不可见，没有错误_Javascript_D3.js_Svg_Charts_Graphics

Javascript D3中的多个椭圆不可见，没有错误

javascript d3.js svg charts graphics

Javascript D3中的多个椭圆不可见，没有错误,javascript,d3.js,svg,charts,graphics,Javascript,D3.js,Svg,Charts,Graphics,我写的一个简单的多椭圆程序。程序没有显示错误，但也没有看到椭圆。虽然我尝试为它添加多个随机颜色。我想某处有点小错误。有人能帮忙吗片段： <html> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/l

我写的一个简单的多椭圆程序。程序没有显示错误，但也没有看到椭圆。虽然我尝试为它添加多个随机颜色。我想某处有点小错误。有人能帮忙吗

片段：

<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

<script> 
$(document).ready(function(){

    //our basic data 
     var customData = [
        { "x": 30, "y": 30, "width": 20, "height" : 10 },
        { "x": 70, "y": 70, "width": 20, "height" : 20},
        { "x": 110, "y": 100, "width": 20, "height" : 30}
     ];

    //Make an SVG Container
    var mySVG = d3.select("svg");

    //create ellipses skeleton by data  
    var ellipses = mySVG.selectAll("ellipse")
            .data(customData)
            .enter()
            .append("ellipse");

    //Draw the Rectangle
    ellipses.append("ellipse")
        .attr("cx", function (d) { return d.x; })
        .attr("cy", function (d) { return d.y; })
        .attr("rx", function (d) { return d.width; })
        .attr("ry", function(d) { return d.height; })
        .attr("fill",function() { return "hsl(" + Math.random() * 360 + ",100%,50%)"; });

});

</script>   
</head>
<body>
    <svg width="500px" height="500px"></svg>
</body>
</html>


$（文档）.ready（函数（）{
//我们的基本数据
var customData=[
{“x”：30，“y”：30，“宽度”：20，“高度”：10}，
{“x”：70，“y”：70，“宽度”：20，“高度”：20}，
{“x”：110，“y”：100，“宽度”：20，“高度”：30}
];
//制作一个SVG容器
var mySVG=d3.select（“svg”）；
//通过数据创建椭圆骨架
var ellipes=mySVG.selectAll（“椭圆”）
.数据（自定义数据）
.输入（）
.附加（“椭圆”）；
//画矩形
椭圆。附加（“椭圆”）
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）
.attr（“rx”，函数（d）{返回d.width；}）
.attr（“ry”，函数（d）{返回d.height；}）
.attr（“fill”，function（）{return”hsl（“+Math.random（）*360+”，100%，50%）”；}）；
});

您将添加两次椭圆元素。下面是工作片段

var customData=[{
“x”：30，
“y”：30，
“宽度”：20，
“高度”：10
}, {
“x”：70，
“y”：70，
“宽度”：20，
“高度”：20
}, {
“x”：110，
“y”：100，
“宽度”：20，
“高度”：30
}];
//制作一个SVG容器
var mySVG=d3.select（“svg”）；
//通过数据创建椭圆骨架
var ellipes=mySVG.selectAll（“椭圆”）
.数据（自定义数据）
.输入（）
.附加（“椭圆”）；
//从这里删除了第二个附加
//画矩形
ellipes.attr（“cx”，函数（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
})
.attr（“rx”，功能（d）{
返回d.width；
})
.attr（“ry”，函数（d）{
返回d.高度；
})
.attr（“填充”，函数（）{
返回“hsl（“+Math.random（）*360+”，100%，50%）”；
});
您将添加两次椭圆元素。下面是工作片段

var customData=[{
“x”：30，
“y”：30，
“宽度”：20，
“高度”：10
}, {
“x”：70，
“y”：70，
“宽度”：20，
“高度”：20
}, {
“x”：110，
“y”：100，
“宽度”：20，
“高度”：30
}];
//制作一个SVG容器
var mySVG=d3.select（“svg”）；
//通过数据创建椭圆骨架
var ellipes=mySVG.selectAll（“椭圆”）
.数据（自定义数据）
.输入（）
.附加（“椭圆”）；
//从这里删除了第二个附加
//画矩形
ellipes.attr（“cx”，函数（d）{
返回d.x；
})
.attr（“cy”，函数（d）{
返回d.y；
})
.attr（“rx”，功能（d）{
返回d.width；
})
.attr（“ry”，函数（d）{
返回d.高度；
})
.attr（“填充”，函数（）{
返回“hsl（“+Math.random（）*360+”，100%，50%）”；
});