chart = {
const svg = d3.select(DOM.svg(width+margin.left+margin.right,
height+margin.top+100+margin.bottom)).style("width", "100%")
.attr("viewBox", [0, 0, width, 400])
.style("width", "100%")
.style("height", "680")
.attr("font-size", 10)
.attr("font-family", "sans-serif")
.attr("align", "center")
.attr("justify-content", "center")
.attr("text-anchor", "middle")
.call(d3.zoom().on("zoom", function () {
svg.attr("transform", d3.event.transform)
}))
svg.append("style").text(`
.hover path {
stroke: #ccc;
}
.hover text {
fill: #ccc;
}
.hover g.primary text {
fill: black;
font-weight: bold;
}
.hover g.secondary text {
fill: #333;
}
.hover path.primary {
stroke: #333;
stroke-opacity: 1;
}
`);
const label = svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 10)
.attr("text-anchor", "end")
.selectAll("g")
.data(graph.nodes.sort(function(x, y){
return d3.ascending(x.group, y.group);
}))
.join("g")
.attr("transform", d => `translate(${margin.left},${d.y = y(d.label)})`)
.call(g => g.append("text")
.attr("x", -6)
.attr("dy", "0.35em")
.attr("fill", d => d3.lab(color(d.group)).darker(2))
.text(d => d.label))
.call(g => g.append("circle")
.attr("r",3)
.attr("fill", d => color(d.group)));
function zoomed({transform}) {
svg.attr("transform", transform);
}
const path = svg.insert("g", "*")
.attr("fill", "none")
.attr("stroke-opacity", 0.6)
.attr("stroke-width", 1.5)
.selectAll("path")
.data(graph.links)
.join("path")
.attr("stroke", d => color_predicate(d.value))
.attr("d", arc);
const nodes = svg.append("g")
.attr("fill", "none")
.attr("pointer-events", "all")
.selectAll("rect")
.data(graph.nodes.sort(function(x, y){
return d3.ascending(x.group, y.group);
}))
.attr("stroke", d => color_predicate(d.value))
.join("rect")
.attr("width", margin.left + 40)
.attr("height", step)
.attr("y", d => y(d.label) - step / 2)
nodes.on('mouseover', function(d) {
d3.select(this).style("fill", d=>color(d.group));
path
.style('stroke', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? d=> color(d.predicate): d=> color(d.predicate);})
.style('stroke-width', function (arcd) {
return arcd.source === d.id || arcd.target === d.id ? 4 : 1;})
label
.style("fill", function (nodeLabeld){
return nodeLabeld.id == d.id ? 'black' : 'black';})
.style('font-weight', function (nodeLabeld) {
return nodeLabeld.id == d.id ? 'bold' : 'normal';})
});
nodes.on('mouseout', function (d) {
nodes.style("fill", d=> color(d.group));
path.style('stroke', d=>color_predicate(d.value));
path.style('stroke-width', 1);
});
return svg.node();
}