嵌套列表可視化爲交互循環圖

我想根據嵌套列表創建交互cycle diagram。列表的頂部元素應該在循環中，並且當您將鼠標懸停在第一個元素上時，我希望顯示嵌套的列表元素。嵌套列表可視化爲交互循環圖

我已經做了相當多的谷歌搜索，但無法找到一個簡單的解決方案。我應該使用HTML canvas還是隻使用CSS，或者最好是一些可以輕鬆實現的框架。

我需要一些幫助嗎，有什麼想法嗎？

來源

2016-06-18 Sharon

也許你只是想公開一些數據的圖表，對吧？

如果是這樣，你可以去一些jQuery的css控件，因爲開發這樣的控件並不是最容易的一個。但它可以從Syncfusion獲得。

現在社區許可證是免費的他們的整個產品。

來源

2016-06-18 19:17:41

其實是有沒有涉及數據彙總。這只是一個清單，需要以循環形式表示。我也可以選擇不去列表並在HTML中編寫div來獲得結果，但嵌套列表在語義上似乎是一個解決方案。 – Sharon

是的，無論沙龍，根據我的經驗，它很難開發數據列表的交互式圖形表示和可能的場景。更好的是我們可以使用第三方控件 –

你提的問題不夠具體，無法給出任何具體答案，但如果你正在尋找如何如何編寫一個週期圖中的一個例子，這裏有我只是沒有用d3放在一起的實現：

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> 
 
    <script src="//labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> 
 

 
    <style> 
 
    body { 
 
     font: 12px sans-serif; 
 
    } 
 
    
 
    .d3-tip { 
 
     line-height: 1; 
 
     font-weight: bold; 
 
     padding: 12px; 
 
     background: rgba(0, 0, 0, 0.8); 
 
     color: #fff; 
 
     border-radius: 2px; 
 
     pointer-events: none; 
 
    } 
 
    /* Creates a small triangle extender for the tooltip */ 
 
    
 
    .d3-tip:after { 
 
     box-sizing: border-box; 
 
     display: inline; 
 
     font-size: 10px; 
 
     width: 100%; 
 
     line-height: 1; 
 
     color: rgba(0, 0, 0, 0.8); 
 
     position: absolute; 
 
     pointer-events: none; 
 
    } 
 
    /* Westward tooltips */ 
 
    
 
    .d3-tip.w:after { 
 
     content: "\25B6"; 
 
     margin: -4px 0 0 -1px; 
 
     top: 50%; 
 
     left: 100%; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <script> 
 
    var data = [{ 
 
     label: 'one', 
 
     children: ['all', 'the', 'rain'] 
 
     }, { 
 
     label: 'two', 
 
     children: ['fails', 'mainly'] 
 
     }, { 
 
     label: 'three', 
 
     children: ['on', 'the', 'plains'] 
 
     }, { 
 
     label: 'four', 
 
     children: ['now', 'is', 'the'] 
 
     }, { 
 
     label: 'five', 
 
     children: ['time', 'for', 'all'] 
 
     }, { 
 
     label: 'seven', 
 
     children: ['good', 'men', 'to'] 
 
     }, { 
 
     label: 'eight', 
 
     children: ['come', 'to', 'the'] 
 
     }, { 
 
     label: 'nine', 
 
     children: ['aid', 'of their', 'country'] 
 
     }], 
 
     width = 500, 
 
     height = 500, 
 
     c = Math.min(width, height)/2, 
 
     ro = Math.min(width, height)/2 - (c * .1), 
 
     ri = Math.min(width, height)/2 - (c * .3), 
 
     a = (Math.PI * 2)/data.length, 
 
     colors = d3.scale.category10(); 
 

 
    var tip = d3.tip() 
 
     .attr('class', 'd3-tip') 
 
     .direction('w') 
 
     .html(function(d) { 
 
     return d.children.join(" ") 
 
     }); 
 

 
    var arc = d3.svg.arc() 
 
     .innerRadius(ri) 
 
     .outerRadius(ro); 
 

 
    var svg = d3.select('body') 
 
     .append('svg') 
 
     .attr('width', 500) 
 
     .attr('height', 500) 
 
     .call(tip); 
 

 
    svg = svg.append('g') 
 
     .attr('transform', 'translate(' + c + ',' + c + ')') 
 

 
    var arcs = svg.selectAll('.cycle') 
 
     .data(data); 
 

 
    var arcsG = arcs.enter() 
 
     .append('g') 
 
     .attr('class', 'cycle'); 
 

 
    arcsG 
 
     .append("path") 
 
     .attr('class', 'cycle') 
 
     .style('fill', function(d, i) { 
 
     return colors(i); 
 
     }) 
 
     .attr("id", function(d) { 
 
     return "path" + d.label; 
 
     }) 
 
     .attr("d", function(d, i) { 
 

 
     arc.startAngle(a * i); 
 
     arc.endAngle(a * (i + 1)); 
 
     d.centroid = arc.centroid(); 
 

 
     return arc(); 
 
     }) 
 
     .on('mouseover', tip.show) 
 
     .on('mouseout', tip.hide); 
 

 
    arcsG 
 
     .append("text") 
 
     .attr("transform", function(d) { 
 
     return "translate(" + d.centroid + ")"; 
 
     }) 
 
     .text(function(d) { 
 
     return d.label; 
 
     }) 
 
     .style("fill", "white") 
 
     .style("text-anchor", "middle") 
 
     .style("alignment-baseline", "middle") 
 
     .style("pointer-events", "none"); 
 

 
    // draw arrow heads last so they end up on top 
 
    arcs 
 
     .enter() 
 
     .append('polygon') 
 
     .attr("points", function(d, i) { 
 
     var sta = a * i, 
 
      spa = a * (i + 1); 
 
     // determine points for arrowhead 
 
     arrowHead = [Math.cos(spa - Math.PI/2) * (ri - 15), Math.sin(spa - Math.PI/2) * (ri - 15)] + ' '; 
 
     arrowHead += [Math.cos(spa - Math.PI/2) * (ro + 15), Math.sin(spa - Math.PI/2) * (ro + 15)] + ' '; 
 
     arrowHead += [Math.cos(spa - Math.PI/2 + ((spa - sta)/4)) * (ri + (ro - ri)/2), Math.sin(spa - Math.PI/2 + ((spa - sta)/4)) * (ri + (ro - ri)/2)]; 
 

 
     return arrowHead; 
 
     }) 
 
     .style("fill", function(d, i) { 
 
     return colors(i); 
 
     }) 
 
     .style("stroke", function(d, i) { 
 
     return colors(i); 
 
     }); 
 
    </script> 
 
</body> 
 

 
</html>

塊here

來源

2016-06-19 16:55:13 Mark

嵌套列表可視化爲交互循環圖

回答

相關問題