D3 Examples - Basic Shapes

xxxxxxxxxx
 
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Shapes - Triangle</title>
​
<!-- JavaScript Libraries //-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
​
<!-- CSS Style //-->
<link href="style.css" rel="stylesheet" type="text/css">
​
</head>
​
<body>
​
    <div id="form" style="display:inline-block;float:left;">
        <div class="formElement">
            <span >X1</span>
            <input id="x1" type="number">
        </div>
        <div class="formElement">
            <span >Y1</span>
            <input id="y1" type="number">
        </div>
        <div class="formElement">
            <span >X2</span>
            <input id="x2" type="number">
        </div>
        <div class="formElement">
            <span >Y2</span>
            <input id="y2" type="number">
        </div>
        <div class="formElement">
            <span >X3</span>
            <input id="x3" type="number">
        </div>
        <div class="formElement">
            <span >Y3</span>
            <input id="y3" type="number">
        </div>
        <div class="formElement">
            <span >Fill Color</span>
            <input id="fillColor" type="text">
        </div>
        <div class="formElement">
            <span >Stroke Color</span>
            <input id="strokeColor" type="text">
        </div>
        <div class="formElement">
            <span >Stroke Width</span>
            <input id="strokeWidth" type="number">
        </div>
        <div class="formElement">
            <span >Width</span>
            <input id="width" type="number">
        </div>
        <div class="formElement">
            <span >Height</span>
            <input id="height" type="number">
        </div>
    </div>
​
    <div id="triangle" style="display:inline-block;float:right;"></div>
​
</body>
​
<script type="text/javascript" src="main.js"></script>
<script>
​
    var config = {
        margin : {top: 50, right: 50, bottom: 50, left: 50},
        x1: 10,
        y1: 10,
        x2: 50,
        y2: 20,
        x3: 30,
        y3: 50,
        fill_color : "red",
        width : 300,
        height : 150,
        stroke_color : "black",
        stroke_width : 2,
        dom_element : "#triangle"
    };
​
    $("#x1").on("input",function(){
        config.x1 = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#y1").on("input",function(){
        config.y1 = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#x2").on("input",function(){
        config.x2 = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#y2").on("input",function(){
        config.y2 = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#x3").on("input",function(){
        config.x3 = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#y3").on("input",function(){
        config.y3 = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#fillColor").on("input",function(){
        config.fill_color = $(this).val();
        renderTriangle(config,false);
    });
    $("#width").on("input",function(){
        config.width = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#height").on("input",function(){
        config.height = parseInt($(this).val());
        renderTriangle(config,false);
    });
    $("#strokeColor").on("input",function(){
        config.stroke_color = $(this).val();
        renderTriangle(config,false);
    });
    $("#strokeWidth").on("input",function(){
        config.stroke_width = parseInt($(this).val());
        renderTriangle(config,false);
    });
​
    renderTriangle(config,true);
​
</script>
</html>
    