Question

我想基于嵌套列表创建交互式cycle diagram。列表的顶部元素应该在循环中，并且当您将鼠标悬停在第一个元素上时，我希望显示嵌套列表元素。

我做了一些谷歌搜索，但无法找到一个简单的解决方案。我应该使用HTML画布还是CSS，或者最好是一些可以轻松实现这一目标的框架。

我需要一些帮助，有什么想法吗？

Answer 1

可能你只是想以图解方式公开一些数据，对吗？

如果是这样，你可以使用一些jquery css控件，因为开发这样的控件并不是最简单的控件。但它可以从Syncfusion获得。

现在社区许可证对他们的整个产品免费。

Answer 2

你的问题不够具体，不能提供任何具体的答案，但如果你正在寻找一个如何编写循环图的例子，这里是我刚刚与d3一起编写的一个实现：

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" 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

嵌套列表可视化为交互式循环图

2 个答案: