D3 JS

Test pour le DOT-PLOT du projet Anagène

by Guillaume Seguin

HTML

<body>
    <h1>D3</h1>
    <p>Je souhaite utiliser cette librairie pour le projet Anagène.</p>
    <p>J'aimerais construire le DOT-PLOT avec cette librairie.</p>
    <p>Il existe quelques exemples que je pourrais adapter.</p>
    <p>De plus, Angular JS propose des modules pour implémenter cette librairie.</p>
    <svg width="720" height="120"></svg>
</body>

JavaScript

var svg = d3.select("svg");
var data = [{"x": 10, "y": 10}, {"x": 50, "y": 10}, {"x": 100, "y": 20}];

svg.selectAll("circle")
    .data(data)
    .enter().append("circle")
    .attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; })
    .attr("r", 10);

var data = [{"x": 50, "y": 10}, {"x": 130, "y": 10}, {"x": 180, "y": 10}, {"x": 230, "y": 20}];

var circle = svg.selectAll("circle")
    .data(data);

circle.enter().append("circle").attr("r", 0).transition().duration(1000).attr("r", 20);

circle.attr("cx", function(d) { return d.x; }).attr("cy", function(d) { return d.y; });
/*
var data = [{"x": 10, "y": 10}, {"x": 50, "y": 10}, {"x": 100, "y": 20}];
svg.selectAll("circle")
    .data(data)
    .exit().remove();
*/