중첩 목록을 기반으로 대화 형 cycle diagram을 만들고 싶습니다. 목록의 맨 위 요소는주기에 있어야하며 중첩 된 목록 요소는 첫 번째 요소 위로 마우스를 가져 가면 나타납니다.중첩 목록이 대화 형주기 다이어그램으로 시각화되었습니다.
나는 꽤 많은 검색을 해왔지만 쉬운 해결책을 찾지 못했습니다. HTML 캔버스 또는 CSS 또는 선호하는 프레임 워크를 사용해야합니다.
여기에 어떤 도움이 필요합니까?
아마도 일부 데이터가 다이어그램으로 표시되기를 원했을 것입니다. 맞습니까?
그러한 컨트롤을 개발하는 것이 가장 쉬운 방법이 아니기 때문에 일부 jquery CSS 컨트롤을 사용할 수 있습니다. 하지만 Syncfusion에서 사용할 수 있습니다.
이제 커뮤니티 라이선스는 전체 제품에 대해 무료입니다.
귀하의 질문은 구체적인 답변을 줄 정도로에만있는 것이 아니라 당신이 사이클 다이어그램을 코딩하는 방법 방법의 예를 찾고 있다면, 여기에 내가 그냥 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
. 순환 된 형식으로 표현되어야하는 단순한 목록입니다. 또한 목록에 가지 않고 결과에 도달하기 위해 HTML로 div를 작성하지만, 중첩 된 목록은 의미 론적으로 더 나은 해결책으로 보입니다. – Sharon
예 샤론 (Sharon)은 내 경험에 비추어 가능한 시나리오로 데이터 목록의 대화식 다이어그램 표현을 개발하는 것은 꽤 어렵습니다. 우리는 제 3 자 컨트롤을 사용할 수있게되었습니다. –