比較文本

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

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 2 vs. 3 --> https://denjn5.github.io/tutorials/

Created Diff never expires
6 removals
57 lines
29 additions
79 lines
<!DOCTYPE html>
<!DOCTYPE html>
<head>
<head>
<title>Sunburst Tutorial (d3 v4), Part 2</title>
<title>Sunburst Tutorial (d3 v4), Part 3</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);


// 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; });


// Get the data from our JSON file
// Get the data from our JSON file
d3.json('data-simple.json', function(error, vData) {
d3.json('data-simple.json', function(error, vData) {
if (error) throw error;
if (error) throw error;
drawSunburst(vData);
drawSunburst(vData);
});
});




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


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

// Add text
vSlices.append('text')
.filter(function(d) { return d.parent; })
.attr('transform', function(d) {
return 'translate(' + vArc.centroid(d) + ')rotate(' + computeTextRotation(d) + ')'; })
.attr('dx', '-20')
.attr('dy', '.5em')
.text(function(d) { return d.data.id });
}


/**
* Calculate the rotation for each label based on its location in the sunburst.
* @param {Node} d - the d3 note for which we're computing text rotation
* @return {Number} the value that should populate the transform: rotate() statement
*/
function computeTextRotation(d) {
var angle = (d.x0 + d.x1) / Math.PI * 90;

// Avoid upside-down labels
return (angle < 120 || angle > 270) ? angle : angle + 180; // labels as rims
//return (angle < 180) ? angle - 90 : angle + 90; // labels as spokes
}
}
</script>
</script>


已保存差異