D3 uden data binding

Posted bysacha

Man plejer som regel at bruge D3 data binding for at lave koden afkoblet.

Data binding er vigtig fordi:

  1. Det gør koden mindre. For eksempel som der blev vist i forrige artikel kan man lave en cirkel men en ligne. Uden data binding bruger man 4 ligner for en cirkel(Se eksempel nedenfor)
  2. Når man han data ligende et sted dkal man kun ændre et sted, i stedet for alle mulige steder i koden
  3. Hvis man har al funktionalitet liggende i et program har fejl støre sansynlighed for at trække det hele ned.

Uden data binding behøves man ikke at starte en python server.

<!DOCTYPE html>
<body></body>
<script src="d3.v3.min.js"></script>
<script>
    var svg = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500);

    svg.append("circle")
        .attr("cx", 150)
        .attr("cy", 100)
        .attr("r", 70);

    svg.append("circle")
        .attr("cx", 100)
        .attr("cy", 200)
        .attr("r", 40);

    svg.append("circle")
        .attr("cx", 300)
        .attr("cy", 200)
        .attr("r", 50);

     d3.selectAll("circle")
        .attr("fill", "RoyalBlue" )
</script>