Ich versuche, ein einfaches Liniendiagramm mit d und einer Winkelanweisung zu machen. Der Svg-Bereich wird auf der Seite angezeigt, aber der Linienteil wird von der Seite gerendert.d3 line rendering off page
Ich bin mit d3 v4
habe ich die x- und y-Daten skalieren. Mein console.log zeigt die X- und Y-Werte an, die alle in die Breite und Höhe des SVG passen sollten. Ich habe eine Weile geforscht und finde keine Lösung, die funktioniert.
Hier ist der Winkelcode:
graphics.directive('lineVis', function(){
return{
restrict: 'E',
scope: {
val: '=',
grouped: '='
},
link: function(scope, element, attrs){
var margin = 25,
width = 960,
height = 500;
data = [{_id:16998.0, total: 1854},{_id:16999.0, total: 2157},{_id:17000.0, total: 2389},{_id:17001.0, total: 2187},{_id:17002.0, total: 1973},{_id:17003.0, total: 1050}];
console.log(data.length);
var x = d3.scaleLinear()
.range([margin, width-margin])
.domain(d3.extent(data, function(d) {return d._id;}));
//[d3.min(data, function(d){return d._id}), d3.max(data, function(d){return d._id})])
var y = d3.scaleLinear()
.range([margin, height-margin])
.domain([0, d3.max(data, function(d){
return d.total;
})]);
var line = d3.line()
.x(function(d){
console.log('Y: '+ y(d.total) + ' X: ' + x(d._id));
return (d._id);
})
.y(function(d){
return y(d.total);
})
var svg = d3.select(element[0])
.append('svg')
.attr('width', width+margin)
.attr('height', height+margin);
svg.selectAll('*').remove() //remove all previous elements
svg.append('path')
.attr('class', 'line')
.attr('stroke', '#777')
.attr('d', line(data));
}
}
});
Und die CSS:
.line {
fill: none;
stroke: steelblue;
stroke-width: 2px;
}
ich die html wissen arbeitet, weil die svg und Linie Rendering wird die Linie nur von Bildschirm zu machen.
Vielen Dank für die Hilfe!