使用Javascript和SVG创建“生命之轮”_Javascript_Svg

使用Javascript和SVG创建“生命之轮”

javascript svg

使用Javascript和SVG创建“生命之轮”,javascript,svg,Javascript,Svg,我可能需要你帮我解决另一个问题。实际上，我正在接受为期3个月的培训，我的上司让我使用SVG创建一个生命之轮。这是我到目前为止的代码： <head> <meta charset="utf-8"> <title>SVG</title> <link rel="stylesheet" type="text/css" href="style.css">

我可能需要你帮我解决另一个问题。实际上，我正在接受为期3个月的培训，我的上司让我使用SVG创建一个生命之轮。这是我到目前为止的代码：

<head>
<meta charset="utf-8">
    <title>SVG</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div>
        <div id="formulaire">
            <label>Number of circles</label>
            <input type="number" min="1" id="cercle"/>
            <label>Number of sections</label>
            <input type="number" min="1" id="section"/>
            <button>Create</button>
        </div>
        <div>
            <svg id="canvas" height="750" width="1910">
                
                         
             </svg>
              
        </div>
    </div>
    <scrip></script>
</body>
</html>

到目前为止，我已经尝试过先创建圆，然后创建一些线来切割我们在输入中要求的部分。但发现即使我可以这样做，我也不应该这样做，因为我需要能够检测到在这种情况下，我稍后单击

最后，外推一定是这样的，没有颜色，现在只有主圆圈，我稍后会自己解决这个问题：

TL；博士我需要创建一个生命之轮（见上图），使用SVG从2个输入（见上图代码）创建

已经感谢你的回答了

这是一个SVG，它使用click处理程序在整个页面中运行代码段

请注意，圆和扇区是以零为基础的

const createSvg=圆，节=>{ const svg=d3。选择“画布”； const width=parseIntsvg.attr'width'； const height=parseIntsvg.attr'height'； //控制台。对数宽度、高度； svg。选择全部“g”。删除； const g=svg.append'g' .attr'transform'，'translate${width/2}，${height/2}`；让我；对于i=0；i<圆；i++ g、附加“圈” .attr'r'，40+i*30 .样式“填充”、“无” .样式“笔划”、“黑色”；常数半径=圆*30+70； const angle=Math.PI*2/截面；设分数=；对于i=0；i{ 常数x=d3.event.layerX-宽度/2；常数y=d3.event.layerY-高度/2；常数半径=Math.x，y； const circle=Math.absMath.ceilradius-40/30；让clickAngle=Math.atan2x，-y；如果单击角度<0 clickAngle=Math.PI*2+clickAngle； const扇形=Math.FloorClickKangle/角度警报“单击圆${Circle}/扇区${Sector}”； } g、附加“多边形” .attr'points'，points .样式“填充”、“白色” .style'stroke'、'black' .样式“填充不透明度”，0.01 .style'cursor'、'pointer' 。单击，然后单击PolygonClick； } const onClickButton==>{ 常量圆=d3。选择“圆”。node.value； const sections=d3。选择'sections'。node.value；创建SVG圆、截面； } d3.选择“按钮” 。在“单击”时，单击按钮；标签{ 宽度：250px；显示：块；利润率：20px0.8px0； } 钮扣{ 保证金：12px 0 12px 0； } svg{ 边框：1px纯黑； } 圈数节数创造

欢迎来到堆栈溢出！欢迎来到堆栈溢出！访问，采取的，看看什么和。请首先>>>如果您的输入仅为圈数和节数，如何指定文本标签？或者你需要在没有文本的情况下渲染SVG？@MichaelRovinsky现在不需要为文本和所有内容操心，如果我能画出这些圆圈，我是一个快乐的人！您是否可以访问原始艺术品，它看起来可能是一个SVG，如果可以，您可以检查SVG以了解它是如何构建的。我想如果它有可点击的区域，它将有剪辑路径、组/层和变换。@Keith我很遗憾没有原始的艺术品，但它确实会有很大帮助，谢谢你的建议！这正是我要找的！非常感谢你，祝你有一个美好的一天！