D3.js дендограмма как добавить ссылки на узлы листьев и изменить цвета

Я строю эту дендограмму с помощью D3. js, и я довольно новичок в этом деле, поэтому у меня есть некоторые проблемы с выяснением того, как мне добавить URL в узлы листьев (в идеале, если бы я мог использовать словарь python или список, чтобы сообщить d3, какие узлы листьев имеют какие ссылки, это было бы идеально), а также как изменить цвета узлов (текст и круг) в соответствии с переменной, которую я имею в своей базе данных (я бы предпочел добавить эту информацию через вспомогательный список или словарь).

Я оставлю свой код и картинку реальной дендограммы.

Большое спасибо! 

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>   
    var width = 2000;  
    var height = 3000;  
    var cluster = d3.layout.cluster()        
        .size([height, width-800]);  
    var diagonal = d3.svg.diagonal()        
        .projection (function(d) { return [d.y, d.x];});  
    var svg = d3.select("body").append("svg")        
        .attr("width",width)        
        .attr("height",height)        
        .append("g")        
        .attr("transform","translate(100,0)");  
    d3.json("{% url 'build_json' %}", function(error, root){        
        var nodes = cluster.nodes(root);        
        var links = cluster.links(nodes);        
        var link = svg.selectAll(".link")              
            .data(links)              
            .enter().append("path")              
            .attr("class","link")              
            .attr("d", diagonal);         
        var node = svg.selectAll(".node")              
            .data(nodes)              
            .enter().append("g")              
            .attr("class","node")              
            .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });        
        node.append("circle")              
            .attr("r", 4.5);        
        node.append("text")              
            .attr("dx", function(d) { return d.children ? -8 : 8; })
            .attr("dy", 3)              
            .style("text-anchor", function(d) { return d.children ? "end" : "start"; })             
            .text( function(d){ return d.name;});  
}); 
</script>
    .node circle {        
        fill: #fff;       
        stroke: steelblue;       
        stroke-width: 1.5px;  
    }  
    .node {       
        font: 20px sans-serif;  
    }  
    .link {       
        fill: none;       
        stroke: #ccc;       
        stroke-width: 1.5px;  
    } 
<div id="my_dataviz"></div>

dendogram

Вернуться на верх