How to use the d3.line function in d3
To help you get started, we’ve selected a few d3 examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
OmicsDI / ddi-web-app / src / app / profile / counting-data-dashboard-profile / dashboard-citations-count-profile / dashboard-citations-count-profile.component.ts View on Github 
y0.domain([0, Number(max_G_T)]);
y1.domain([0, Number(max_M_P)]);
const valueline = d3.line()
.x(d => {
return x0(new Date(d['year'], 0, 0));
})
.y(d => {
return y0(parseInt(d['value'], 10));
});
const valueline2 = d3.line()
.x(d => {
// console.log('Line:');
// console.log(x0(new Date(d["year"], 0, 0)));
return x0(new Date(d['year'], 0, 0));
})
.y(d => {
// console.log(y1(parseInt(d["value"])));
return y1(parseInt(d['value'], 10));
});
if (genomicsList) {
svg.append('path')
.style('stroke', 'steelblue')
.attr('d', valueline(genomicsList))
.style('fill', d => {
console.log(d);}
let wide = this.width;
let ratio = split;
let x = wide * (center - ratio * idx);
const current = idx === -1;
if (current) {
wide -= 2;
ratio = full;
x = wide - 2;
}
const hoursRange = [0, sumBy('hours')(builds)];
const dateRange = [start, release.date];
const xScale = scaleTime().domain(dateRange).range([-ratio * wide, 0]);
const lastDayX = Math.min(xScale(builds.slice(-1)[0].date), 0);
const hoursScale = scaleTime().domain(hoursRange).range([-ratio * wide, lastDayX]);
const path = line().x(d => xScale(d.date)).y(d => yScale(d.rate)).curve(curveMonotoneX);
// const area = d3.svg.area()
// .x(d => xScale(d.date))
// .y0(d => yScale(d.rate - d.variance))
// .y1(d => yScale(d.rate + d.variance))
// .interpolate('monotone');
let hoursX = 0;
const candidates = builds.map((candidate, cidx) => {
if (candidate.hours) {
hoursX += candidate.hours;
}
return this.renderCandidate({
release: candidate,
idx: cidx,
rate: candidate.rate,
xScale,
yScale,.range([height_cross, 0]);
var xAxis = d3.axisBottom()
.scale(x)
.ticks(5);
var yAxis = d3.axisLeft()
.scale(y);
var area = d3.area()
.curve(d3.curveMonotoneX)
.x(function (d) {
return x(d.x);
})
.y0(height_cross - avg_y)
.y1(function (d) {
return y(d.y);
});
var line = d3.line()
.x(function (d) {
return x(d.x);
})
.y(function (d) {
return y(d.y);
})
.curve(d3.curveMonotoneX);
var plotsvg = d3.select(plot_a)
.append("svg")
.attr("id", "plotsvg_id")
.style("width", width_cross + margin_cross.left + margin_cross.right) //setting height to the height of #main.left
.style("height", height_cross + margin_cross.top + margin_cross.bottom)
.style("margin-left", "20px")
.append("g")
.attr("transform", "translate(0," + margin_cross.top + ")");if (p['name'] === 'genomics' || p['name'] === 'transcriptomics') {
return parseInt(p['value'], 10);
}
});
})]);
y1.domain([0, d3.max(annualDataExtends, d => {
return d3.max(d['omics'], r => {
if (r['name'] === 'metabolomics' || r['name'] === 'proteomics') {
return parseInt(r['value'], 10);
}
});
})
]);
const valueline = d3.line()
.x(d => {
return x0(new Date(d['year'], 0, 0));
})
.y(d => {
return y0(parseInt(d['value'], 10));
});
const valueline2 = d3.line()
.x(d => {
return x0(new Date(d['year'], 0, 0));
})
.y(d => {
return y1(parseInt(d['value'], 10));
});
svg.append('path')if (r['name'] === 'metabolomics' || r['name'] === 'proteomics') {
return parseInt(r['value'], 10);
}
});
})
]);
const valueline = d3.line()
.x(d => {
return x0(new Date(d['year'], 0, 0));
})
.y(d => {
return y0(parseInt(d['value'], 10));
});
const valueline2 = d3.line()
.x(d => {
return x0(new Date(d['year'], 0, 0));
})
.y(d => {
return y1(parseInt(d['value'], 10));
});
svg.append('path')
.style('stroke', 'steelblue')
.attr('d', valueline(genomicsList));
svg.append('path')
.style('stroke', 'steelblue')
.style('stroke-dasharray', ('3, 3'))
.attr('d', valueline(transcriList));export function station(
d,
xScale,
yScale,
lineWidthMultiplier,
lineWidthTickRatio
) {
var dir;
var sqrt2 = Math.sqrt(2);
var lineFunction = d3
.line()
.x(function(d) {
return xScale(d[0]);
})
.y(function(d) {
return yScale(d[1]);
});
switch (d.labelPos.toLowerCase()) {
case 'n':
dir = [0, 1];
break;
case 'ne':
dir = [1 / sqrt2, 1 / sqrt2];
break;
case 'e':.attr("height", FilterControlHeight + 7);
var labelStack = [];
var _areaGenerator = d3.area()
.curve(d3.curveLinear)
.x(function (d, i) {
return _x0(d['data'][_dimension[0]]) + _x0.bandwidth() / 2;
})
.y0(function (d, i) {
return _y(0);
})
.y1(function (d) {
return _y(d['data'][d['tag']]);
});
var _lineGenerator = d3.line()
.curve(d3.curveLinear)
.x(function (d, i) {
return _x0(d['data'][_dimension[0]]) + _x0.bandwidth() / 2;
})
.y(function (d, i) {
return _y(d['data'][d['tag']]);
});
var labelStack = [];
var cluster_barFiltet = context.selectAll('.cluster_barFiltet')
.data(data)
.enter().append('g')
.attr('class', 'cluster_barFiltet')
.attr('transform', function (d) {
return 'translate(' + _x0(d[_dimension[0]]) + ', 0)';let svg = d3.select(this.svg)
const width = svg.attr('width') - MARGINS.left - MARGINS.right,
height = svg.attr('height') - MARGINS.top - MARGINS.bottom
const scaleX = d3
.scaleTime()
.domain([new Date(d3.min(dates)), new Date()])
.range([0, width])
const scaleY = d3
.scaleLinear()
.domain([0, d3.max(versions)])
.range([height, 0])
const line = d3
.line()
.x(function(d) {
return scaleX(new Date(d.date))
})
.y(function(d) {
return scaleY(d.version)
})
svg
.append('g')
.attr('class', 'axis axis--x')
.attr(
'transform',
'translate(' +
(MARGINS.left + 20) +
',' +
