Texte vergleichen

Finden Sie den Unterschied zwischen zwei Textdateien

Real-time diff
Unified diff
Collapse lines
Highlight change
Syntax highlighting
Onlinewerkzeuge
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

Untitled diff

Created Diff never expires
21 removals
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
162 lines
23 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
164 lines
var params = {};
var params = {};
params.width = 320;
params.width = 320;
params.height = 320;
params.height = 320;
params.more = 31;
params.more = 31;
params.container = '.network';
params.container = '.network';
params.nodes = [
params.nodes = [
{
{
"name": "Karnataka",
"name": "Karnataka",
"value": 16
"value": 16
},
},
{
{
"name": "Uttar Pradesh(East)",
"name": "Uttar Pradesh(East)",
"value": 22,
"value": 22,
},
},
{
{
"name": "Uttar Pradesh East",
"name": "Uttar Pradesh East",
"value": 31
"value": 31
},
},
{
{
"name": "Delhi",
"name": "Delhi",
"value": 55
"value": 55
},
},
{
{
"name": "Andhra Pradesh",
"name": "Andhra Pradesh",
"value": 108
"value": 108
}
}
];
];


var data = params.nodes;
var data = params.nodes;
var margin = {top: 0, right: 40, bottom: 40, left: 60};
var margin = {top: 0, right: 40, bottom: 40, left: 60};
var width = params.width - margin.right - margin.left;
var width = params.width - margin.right - margin.left;
var height = params.height - margin.top - margin.bottom;
var height = params.height - margin.top - margin.bottom;
var left = 5;
var left = 5;
var top = 5;
var top = 5;
var axisLeft = 20;
var axisLeft = 20;


var svg = d3.select(params.container)
var svg = d3.select(params.container)
.select('svg')
.select('svg')
.attr('width', width + margin.right + margin.left)
.attr('width', width + margin.right + margin.left)
.attr('height', height + margin.top + margin.bottom)
.attr('height', height + margin.top + margin.bottom)
.select('g')
.select('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');


// Remove any other chart
// Remove any other chart
svg.selectAll('*').remove();
svg.selectAll('*').remove();


// set the ranges
// set the ranges
var yScale = d3.scaleBand()
var yScale = d3.scaleBand()
.range([height, 0])
.range([height, 0])
.padding(0.1);
.padding(0.1);


var xScale = d3.scaleLinear()
var xScale = d3.scaleLinear()
.range([0, width]);
.range([0, width]);
// Scale the range of the data in the domains
// Scale the range of the data in the domains
xScale.domain([0, d3.max(data, function(d) { return d.value; })]);
xScale.domain([0, d3.max(data, function(d) { return d.value; })]);
yScale.domain(data.map(function(d) { return d.name; }));
yScale.domain(data.map(function(d) { return d.name; }));


var yAxis = d3.axisLeft(yScale);
var yAxis = d3.axisLeft(yScale);
var bar = svg.selectAll('g')
var bar = svg
.data(data)
.enter()
.append('g')
.append('g')
.attr('class', 'y axis')
.attr('class', 'y axis')
.attr('transform', 'translate(' + axisLeft + ',0)')
.attr('transform', 'translate(' + axisLeft + ',0)')
.call(yAxis);
.call(yAxis)



svg.selectAll('.tick text')
svg.selectAll('.tick text')
.attr('dy', '.35em')
.attr('dy', '.35em')
.text(function(d) {
.text(function(d) {
if (d.length > 20) {
if (d.length > 20) {
return d.substring(0, 20) + '...';
return d.substring(0, 20) + '...';
}
}
return d;
return d;
})
})
.attr('transform', function(d) {
.attr('transform', function(d) {
var name = d;
var name = d;
if (d.length > 20) {
if (d.length > 20) {
name = d.substring(0, 20) + '...';
name = d.substring(0, 20) + '...';
}
}
var names = name.split(' ');
var names = name.split(' ');
return 'translate(0,' + (-names.length / 2) * 10 + ')';
return 'translate(0,' + (-names.length / 2) * 10 + ')';
})
})
.call(wrap, 50)
.call(wrap, 50)
.on('click', function(d) {
.on('click', function(d) {
//$scope.$broadcast('bar:clicked', d);
//$scope.$broadcast('bar:clicked', d);
});
});


// append the rectangles for the bar chart
// append the rectangles for the bar chart
bar.append('rect')
bar
.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('class', 'barChart')
.attr('class', 'barChart')
.attr('x', left)
.attr('x', left)
.attr('width', function(d) { return xScale(d.value); })
.attr('width', function(d) { return xScale(d.value); })
.attr('y', function(d) { return yScale(d.name) + yScale.bandwidth() / 4; })
.attr('y', function(d) { return yScale(d.name) + yScale.bandwidth() / 4; })
.attr('height', yScale.bandwidth() / 2)
.attr('height', yScale.bandwidth() / 2)
.attr('fill', 'black')
.attr('fill', 'black')
//.attr('fill', function(d) { return $scope.getBubbleFill(d); })
//.attr('fill', function(d) { return $scope.getBubbleFill(d); })
.on('click', function(d) {
.on('click', function(d) {
//$scope.$broadcast('bar:clicked', d.name);
//$scope.$broadcast('bar:clicked', d.name);
});
});


bar.append('text')
.attr('class', 'label')
.attr('fill', 'white')
.attr('text-anchor', function(d) {
return xScale(d.value) < 20 ? 'middle' : 'end';
})
.attr('x', function(d) {
return xScale(d.value);
})
.attr('y', function(d) {
return yScale(d.name) + (yScale.bandwidth() / 2 + top);
})
.on('click', function(d) {
//$scope.$broadcast('bar:clicked', d.name);
});
if (params.more) {
if (params.more) {
bar.append('text')
bar.append('text')
.attr('class', 'label')
.attr('class', 'label')
.attr('fill', 'white')
.attr('fill', 'white')
.text(function() { return '+' + params.more + ' more'; })
.text(function() { return '+' + params.more + ' more'; })
.attr('transform', 'translate(' + 0 + ',' + (height + 20) + ')')
.attr('transform', 'translate(' + 0 + ',' + (height + 20) + ')')
.on('click', function(d) {
.on('click', function(d) {
//$scope.gotoExplore(d);
//$scope.gotoExplore(d);
});
});
}
}




function wrap(text, width) {
function wrap(text, width) {
text.each(function() {
text.each(function() {
var text = d3.select(this); // eslint-disable-line no-invalid-this
var text = d3.select(this); // eslint-disable-line no-invalid-this
var words = text.text()
var words = text.text()
.split(/\s+/)
.split(/\s+/)
.reverse();
.reverse();
var word;
var word;
var line = [];
var line = [];
var lineHeight = 1.1;
var lineHeight = 1.1;
var lineNumber = 0;
var lineNumber = 0;
var y = 0;
var y = 0;
var x = 0;
var x = 0;
// var dy = 0;
// var dy = 0;
var tspan = text.text(null)
var tspan = text.text(null)
.append('tspan')
.append('tspan')
.attr('x', x)
.attr('x', x)
.attr('y', y);
.attr('y', y)
.text('1');
var tspanHeight = tspan.node().getBBox().height;;

word = words.pop();
word = words.pop();
while (word) {
while (word) {
line.push(word);
line.push(word);
tspan.text(line.join(' '));
tspan.text(line.join(' '));
if (tspan.node().getComputedTextLength() > width - x) {
if (tspan.node().getComputedTextLength() > width - x) {
line.pop();
line.pop();
tspan.text(line.join(' '));
tspan.text(line.join(' '));
line = [word];
line = [word];
lineNumber += 1;
lineNumber += 1;
tspan = text.append('tspan')
tspan = text.append('tspan')
.attr('x', x)
.attr('x', x)
.attr('dy', lineHeight + 'em')
.attr('dy', lineHeight + 'em')
.text(word);
.text(word);
}
}
word = words.pop();
word = words.pop();
}
}
var textHeight = text.node().getBBox().height;
console.log('tspanHeight', tspanHeight)
console.log('textHeight', textHeight)
var yTransition = textHeight / 2 - tspanHeight / 2;
text.attr('transform', 'translate(-10,-'+ yTransition +')')
});
});
};
};
Gespeicherten Diffs