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 <span>Anagène</span>.</p>
    <p>J'aimerais construire le <span>DOT-PLOT</span> avec cette librairie.</p>
    <p>Il existe quelques exemples que je pourrais adapter.</p>
    <p>De plus, <span>Angular JS</span> propose des modules pour implémenter cette librairie.</p>
    <div></div>
    <svg heigh="150px" width="800px"></svg>
</body>

JavaScript

d3.select("div").datum(42).text(function(d) { return d; });

var selection = d3.selectAll("p").select("span");
console.log(selection);
console.log(selection.node());

var data = [
    {
        id: 1,
        cx: 50,
        fill: 'red'
    },
    {
        id: 2,
        cx: 200,
        fill: 'green'
    },
    {
        id: 3,
        cx: 350,
        fill: 'yellow'
    },
    {
        id: 4,
        cx: 500,
        fill: 'blue'
    }
];

d3.select("svg").selectAll("circle").data(data, function(d) {
    return d.id;
}).enter().append("circle").attr('cx', function(d){
    return d.cx;
}).attr('cy', 50).attr('r', 30).attr('fill', function(d){
    return d.fill;
});