D3 multi line chart - d3.js

Question

This is the data I have to draw on a D3 line graph, where the lines are Addon, Loss, New, Repeat. Same should be shown in the legend:
dataf: [
{
drugs: "BENEPALI",
Addon: 328,
Loss: 560,
New: 250,
Repeat: 321,
},
{
drugs: "CIMZIA",
Addon: 328,
Loss: 460,
New: 250,
Repeat: 321,
},
{
drugs: "COSENTYX",
Addon: 265,
Loss: 360,
New: 250,
Repeat: 421,
},
{
drugs: "ENBREL",
Addon: 281,
Loss: 260,
New: 150,
Repeat: 321,
},
{
drugs: "TALTZ",
Addon: 290,
Loss: 560,
New: 150,
Repeat: 321,
},
],
I have some success with drawing the legend and plotting axis but not with line. I think there is a problem with the data.
Here is the code:
<template>
<div>
<b-button #click="esCall(dataf, stacklist, 1460, 350)">es call</b-button>
<div id="kmCurveLegend" style="margin-left: -150px; margin-top: 30px"></div>
<div id="kmCurve" style="margin-top: 10px"></div>
</div>
</template>
<script>
import * as d3 from "d3";
import d3Tip from "d3-tip";
export default {
data() {
return {
dataf: [
{
drugs: "BENEPALI",
Addon: 328,
Loss: 560,
New: 250,
Repeat: 321,
},
{
drugs: "CIMZIA",
Addon: 328,
Loss: 460,
New: 250,
Repeat: 321,
},
{
drugs: "COSENTYX",
Addon: 265,
Loss: 360,
New: 250,
Repeat: 421,
},
{
drugs: "ENBREL",
Addon: 281,
Loss: 260,
New: 150,
Repeat: 321,
},
{
drugs: "TALTZ",
Addon: 290,
Loss: 560,
New: 150,
Repeat: 321,
},
],
stacklist: ["Addon", "Loss", "New", "Repeat"],
xlabel: [],
sumstat: null,
mktSegName: "",
current_stacks: null,
height: 0,
width: 0,
svg: null,
res: null,
x1: null,
minWidth: null,
minHeight: null,
stacks: null,
totalStacks: null,
data: null,
};
},
mounted() {
// this.kmLayout();
},
methods: {
esCall(dataf, stacklist, w, h) {
this.stacks = stacklist;
this.data = dataf;
this.minWidth = w;
this.minHeight = h;
this.kmLayout(this.minWidth, this.minHeight, this.data, this.stacks);
},
kmLayout(w, h, data, stacklist) {
d3.selectAll("#KMGraph").remove();
// set the dimensions and margins of the graph
var margin = { top: 10, right: 30, bottom: 30, left: 60 };
this.width = w - margin.left - margin.right;
this.height = h - margin.top - margin.bottom;
// append the svg object to the body of the page
this.svg = d3
.select("#kmCurve")
.append("svg")
.attr("id", "KMGraph")
.attr("width", this.width + margin.left + margin.right)
.attr("height", this.height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//Grouping according to multiple MS
var updatedData = [];
for (var i in data) {
updatedData.push(data[i]);
}
this.sumstat = d3.group(
updatedData,
(d) => d.Addon && d.Loss && d.New && d.Repeat
);
console.log("this.sumstat", this.sumstat);
var x = d3
.scaleBand()
.domain(
data.map(function (d) {
return d.drugs;
})
)
.range([0, this.width]); // This controls the Horizontal position of the Axis
// Draw the axis
this.svg
.append("g")
.attr("transform", "translate(0," + this.height + ")") // This controls the vertical position of the Axis
.call(d3.axisBottom(x));
// Add Y axis
var y = d3
.scaleLinear()
.domain([
0,
d3.max(data, function (d) {
return +d.Loss + d.Addon + d.New + d.Repeat;
}),
])
.range([this.height, 0]);
this.svg.append("g").call(d3.axisLeft(y));
//tooltip
this.tip = d3Tip()
.attr("class", "d3-tip")
.direction("e")
.html(function (d, i) {
return (
"<div style='margin-top:20%;background-color:whitesmoke;border-radius:4px;color:black;padding:5px'><strong>" +
i[0]
// +
// "</strong><br><strong>( " +
// i[1][parseInt(r / 10)] +
// "," +
// i[1][parseInt(r / 10)].sum +
// ")</strong></div>"
);
});
this.svg.call(this.tip);
var dataArray = Array.from(this.sumstat, ([key, value]) => ({
key,
value,
}));
var color = d3
.scaleOrdinal()
.domain(
stacklist.map(function (d) {
return d;
})
)
.range([
"#e20000",
"#377eb8",
"#4daf4a",
"#250056 ",
"#ff9300",
"#df216d",
"#a65628",
"#0768fd",
"#00c221",
"#9e54b0",
"#ffff33",
"#10558a",
"#595959",
]);
this.svg
.selectAll(".line")
.data(this.sumstat)
.enter()
.append("path")
.attr("class", "lineKM")
.attr("id", (d) => "kmCurve" + d[1])
.attr("fill", "none")
.attr("stroke", function (d) {
console.log(d);
console.log("color", d[0], color(d[0]));
return color(d[0]);
})
.attr("stroke-width", 3.5)
.attr("d", function (d) {
return d3
.line()
.x((d) => {
console.log("5555555555555555555555", x(d.drugs));
return x(d.drugs);
})
.y((d) => {
console.log("66666666666666666666666", y(d.Addon));
return y(d.Addon);
})(
d[1].sort(function (a, b) {
console.log("bbbbbbbbbbbbbbbbbbb", b.Addon - a.Addon);
return b.Addon - a.Addon;
})
);
})
.on("mouseover", function (d) {
d3.selectAll("#kmCurve" + d.replace(/[^a-zA-Z0-9]/g, "_")).style(
"opacity",
0.1
);
d3.select(this).style("opacity", 1);
})
.call(this.tip)
.on("mouseover", this.tip.show)
.on("mouseout", this.tip.hide);
this.svg
.selectAll(".line")
.data(this.sumstat)
.enter()
.append("path")
.attr("class", "lineKM")
.attr("id", (d) => "kmCurve" + d[1])
.attr("fill", "none")
.attr("stroke", function (d) {
console.log(d);
console.log("color", d[0], color(d[0]));
return color(d[0]);
})
.attr("stroke-width", 3.5)
.attr("d", function (d) {
return d3
.line()
.x((d) => {
console.log("5555555555555555555555", x(d.drugs));
return x(d.drugs);
})
.y((d) => {
console.log("66666666666666666666666", y(d.Loss));
return y(d.Loss);
})(
d[1].sort(function (a, b) {
console.log("bbbbbbbbbbbbbbbbbbb", b.Loss - a.Loss);
return b.Loss - a.Loss;
})
);
})
.on("mouseover", function (d) {
d3.selectAll("#kmCurve" + d.replace(/[^a-zA-Z0-9]/g, "_")).style(
"opacity",
0.1
);
d3.select(this).style("opacity", 1);
})
.call(this.tip)
.on("mouseover", this.tip.show)
.on("mouseout", this.tip.hide);
this.svg
.selectAll(".line")
.data(this.sumstat)
.enter()
.append("path")
.attr("class", "lineKM")
.attr("id", (d) => "kmCurve" + d[1])
.attr("fill", "none")
.attr("stroke", function (d) {
console.log(d);
console.log("color", d[0], color(d[0]));
return color(d[0]);
})
.attr("stroke-width", 3.5)
.attr("d", function (d) {
return d3
.line()
.x((d) => {
console.log("5555555555555555555555", x(d.drugs));
return x(d.drugs);
})
.y((d) => {
console.log("66666666666666666666666", y(d.New));
return y(d.New);
})(
d[1].sort(function (a, b) {
console.log("bbbbbbbbbbbbbbbbbbb", b.New - a.New);
return b.New - a.New;
})
);
})
.on("mouseover", function (d) {
d3.selectAll("#kmCurve" + d.replace(/[^a-zA-Z0-9]/g, "_")).style(
"opacity",
0.1
);
d3.select(this).style("opacity", 1);
})
.call(this.tip)
.on("mouseover", this.tip.show)
.on("mouseout", this.tip.hide);
this.svg
.selectAll(".line")
.data(this.sumstat)
.enter()
.append("path")
.attr("class", "lineKM")
.attr("id", (d) => "kmCurve" + d[1])
.attr("fill", "none")
.attr("stroke", function (d) {
console.log(d);
console.log("color", d[0], color(d[0]));
return color(d[0]);
})
.attr("stroke-width", 3.5)
.attr("d", function (d) {
return d3
.line()
.x((d) => {
console.log("5555555555555555555555", x(d.drugs));
return x(d.drugs);
})
.y((d) => {
console.log("66666666666666666666666", y(d.Repeat));
return y(d.Repeat);
})(
d[1].sort(function (a, b) {
console.log("bbbbbbbbbbbbbbbbbbb", b.Repeat - a.Repeat);
return b.Repeat - a.Repeat;
})
);
})
.on("mouseover", function (d) {
d3.selectAll("#kmCurve" + d.replace(/[^a-zA-Z0-9]/g, "_")).style(
"opacity",
0.1
);
d3.select(this).style("opacity", 1);
})
.call(this.tip)
.on("mouseover", this.tip.show)
.on("mouseout", this.tip.hide);
this.createLegend(stacklist);
},
createLegend(stacklist) {
d3.selectAll("#KmLegends").remove();
var stacks = stacklist;
this.current_stacks = stacks;
console.log("stacks", stacks);
this.stackedZ = d3
.scaleOrdinal()
.range([
"#e20000",
"#377eb8",
"#4daf4a",
"#250056 ",
"#ff9300",
"#df216d",
"#a65628",
"#0768fd",
"#00c221",
"#9e54b0",
"#ffff33",
"#10558a",
"#595959",
])
.domain(stacks);
this.legendsvg = d3
.select("#kmCurveLegend")
.append("svg")
.attr("class", "legendKmCurve")
.attr("id", "KmLegends")
.attr("width", 1000)
.attr("height", 50);
this.legendg = this.legendsvg.append("g");
stacks.forEach((d, i) => {
var position = i;
this.legendg
.append("circle")
.attr("class", "legendCircle")
.attr("id", "legendCircle" + d.replace(/[^a-zA-Z0-9]/g, "_"))
.attr("r", 10)
.attr("cy", 20)
.attr("cx", position * 165 + 225)
.attr("fill", this.stackedZ(d))
.on("click", () => {
this.addOrDelete(d);
})
.on("mouseover", () => {
console.log("circle d", d);
d3.selectAll(".lineKM").style("opacity", 0.2);
d3.select("#kmCurve" + d.replace(/[^a-zA-Z0-9]/g, "_")).style(
"opacity",
2
);
d3.selectAll(".legendCircle").style("opacity", 0.1);
d3.select("#legendCircle" + d.replace(/[^a-zA-Z0-9]/g, "_")).style(
"opacity",
2
);
})
.on("mouseout", () => {
d3.selectAll(".lineKM").style("opacity", 1);
d3.selectAll(".legendCircle").style("opacity", 1);
})
.append("svg:title")
.text(d);
this.legendg
.append("text")
.attr("class", "legendKM" + d.replace(/[^a-zA-Z0-9]/g, "_"))
.on("click", (d, i, key) => {
console.log("key of text", key);
if (
document.getElementById(
"kmCurve" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
).style.opacity == 1
) {
d3.selectAll(
"#kmCurve" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
).style("opacity", 0);
d3.selectAll(
"." + "legendKM" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
)
.style("text-decoration", "line-through")
.style("opacity", 0.2);
d3.selectAll(
"#legendCircle" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
)
.style("text-decoration", "line-through")
.style("opacity", 0.2);
this.$forceUpdate();
} else {
d3.selectAll(
"#kmCurve" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
).style("opacity", 1);
d3.selectAll(
"." + "legendKM" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
)
.style("text-decoration", "none")
.style("opacity", 1)
.style("white-space", "nowrap")
.style("text-overflow", "ellipsis");
d3.selectAll(
"#legendCircle" + d[0].replace(/[^a-zA-Z0-9]/g, "_").innerHTML
)
.style("text-decoration", "line-through")
.style("opacity", 1);
this.$forceUpdate();
}
this.$forceUpdate();
this.addOrDelete(d[0].innerHTML);
})
.text(d)
.attr("y", 20)
.attr("x", position * 165 + 240)
.style("font-weight", "bold")
.style("font-size", "18px")
.attr("transform", "translate(0,6)")
.append("svg:title");
this.$forceUpdate();
});
},
addOrDelete(name) {
this.current_stacks.includes(name)
? this.filterData(name)
: this.addData(name);
},
filterData(name) {
console.log("this.current_stacks.length", this.current_stacks.length);
if (this.current_stacks.length == 1) {
return;
}
this.current_stacks = this.current_stacks.filter((obj) => {
return obj != name;
});
this.kmUpdatedLayout(
this.minWidth,
this.minHeight,
this.data,
this.current_stacks
);
this.legendUpdate(name, 0);
},
addData(name) {
if (this.current_stacks.includes(name)) {
return;
}
this.current_stacks.push(name);
this.kmUpdatedLayout(
this.minWidth,
this.minHeight,
this.data,
this.current_stacks
);
this.legendUpdate(name, 1);
},
legendUpdate(name, status) {
status
? d3
.selectAll("." + "legendKM" + name.replace(/[^a-zA-Z0-9]/g, "_"))
.style("text-decoration", "none")
.style("opacity", 1)
: d3
.selectAll("." + "legendKM" + name.replace(/[^a-zA-Z0-9]/g, "_"))
.style("text-decoration", "line-through")
.style("opacity", 0.4);
},
},
};
</script>
<style scoped>
</style>