比較文本

尋找兩個文字檔案之間的差異

Real-time diff
Unified diff
Collapse lines
Highlight change
Syntax highlighting
工具
Diffchecker Desktop icon
Diffchecker Desktop The most secure way to run Diffchecker. Get the Diffchecker Desktop app: your diffs never leave your computer!Get Desktop

Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

Download Diffchecker DesktopLearn more

Sunburst Tutorial 1 vs. 2 --> https://denjn5.github.io/tutorials/

Created Diff never expires
21 removals
55 lines
29 additions
58 lines
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<head>
<title>Sunburst Tutorial (d3 v4), Part 1</title>
<title>Sunburst Tutorial (d3 v4), Part 2</title>
<script src='../plugins/d3/d3.v4.min.js'></script>
<script src='../plugins/d3/d3.v4.min.js'></script>
</head>
</head>
<body>
<body>
<svg></svg>
<svg></svg>
</body>
</body>


<script>
<script>
var vWidth = 300;
var vWidth = 300;
var vHeight = 300;
var vHeight = 300;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vRadius = Math.min(vWidth, vHeight) / 2;
var vColor = d3.scaleOrdinal(d3.schemeCategory20b);
var vColor = d3.scaleOrdinal(d3.schemeCategory20b);
var vData = {
'id': 'TOPICS', 'children': [{
'id': 'Topic A',
'children': [{'id': 'Sub A1', 'size': 4}, {'id': 'Sub A2', 'size': 4}]
}, {
'id': 'Topic B',
'children': [{'id': 'Sub B1', 'size': 3}, {'id': 'Sub B2', 'size': 3},
{'id': 'Sub B3', 'size': 3}]
}, {
'id': 'Topic C',
'children': [{'id': 'Sub C1', 'size': 4}, {'id': 'Sub C2', 'size': 4}]
}]};


// Prepare our physical space
// Prepare our physical space
var g = d3.select('svg')
var g = d3.select('svg')
.attr('width', vWidth).attr('height', vHeight)
.attr('width', vWidth).attr('height', vHeight)
.append('g')
.append('g')
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');
.attr('transform', 'translate(' + vWidth / 2 + ',' + vHeight / 2 + ')');


// d3 layout
// d3 layout
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vLayout = d3.partition().size([2 * Math.PI, vRadius]);
var vArc = d3.arc()
var vArc = d3.arc()
.startAngle(function (d) { return d.x0; })
.startAngle(function (d) { return d.x0; })
.endAngle(function (d) { return d.x1; })
.endAngle(function (d) { return d.x1; })
.innerRadius(function (d) { return d.y0; })
.innerRadius(function (d) { return d.y0; })
.outerRadius(function (d) { return d.y1; });
.outerRadius(function (d) { return d.y1; });


// Layout prep
// Get the data from our JSON file
var vRoot = d3.hierarchy(vData).sum(function (d) { return d.size });
d3.json('data-simple.json', function(error, vData) {
var vNodes = vRoot.descendants();
if (error) throw error;
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');


// Draw sunburst
drawSunburst(vData);
vSlices.filter(function(d) { return d.parent; })
});
.attr('d', vArc)

.style('stroke', '#fff')

.style('fill', function (d) {
/**
return vColor((d.children ? d : d.parent).data.id); });
* Draw our sunburst
* @param {object} data - Hierarchical data
*/
function drawSunburst(data) {
// Layout prep
var vRoot = d3.hierarchy(data).sum(function (d) { return d.size});
var vNodes = vRoot.descendants();
vLayout(vRoot);
var vSlices = g.selectAll('path').data(vNodes).enter().append('path');

// Draw sunburst
vSlices.attr('display', function (d) { return d.depth ? null : 'none'; })
.attr('d', vArc)
.style('stroke', '#fff')
.style('fill', function (d) {
return vColor((d.children ? d : d.parent).data.id); });
}
</script>
</script>


已保存差異