I'm currently working on a project that requires me to develop a unique legend featuring two text values. While I have successfully created a legend and other components, I am facing difficulties in achieving the desired design.
Specifically, the current output fails to handle long texts gracefully. Additionally, I need the legend to display the labels ("A", "B", etc.) in blue while keeping the rest of the text in black.
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v6.js"></script>
<script>
var data = [{"legend_value":"A","value":8,"label":"test1"},
{"legend_value":"B","value":15,"label":"this is a veryyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy long text"},
{"legend_value":"C","value":20,"label":"test3"},
{"legend_value":"D","value":10,"label":"test4"},
{"legend_value":"E","value":25,"label":"test5"},
{"legend_value":"F","value":1000,"label":"test6"},
];
for (var i=0;i <data.length;i++){
data[i]["legend_value"]=String.fromCharCode(65+i)
}
console.log(data)
// set the dimensions and margins of the graph
var margin = {top: 20, right: 500, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
// define the ranges
var y = d3.scaleBand()
.range([height, 0])
.padding(0.2);
var x = d3.scaleLinear()
.range([0, width-50]);
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 300 300")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
// format the data
data.forEach(function(d) {
d.value = +d.value;
});
// Scale the range of the data in the domains
x.domain([0, d3.max(data, function(d){ return d.value; })])
y.domain(data.map(function(d) { return d.legend_value; }));
//y.domain([0, d3.max(data, function(d) { return d.value; })]);
var bar_height=Math.min(Math.ceil((height/data.length)-data.length*1),45);
// append the rectangles for the bar chart
var bars = svg.selectAll(".bar")
.data(data)
.enter()
bars.append("path")
.attr("class", "bar")
//.attr("x", function(d) { return x(d.value); })
.attr("width", function(d) {return x(d.value); } )
.attr("y", function(d) { return y(d.legend_value); })
.attr("height", y.bandwidth())
.attr("fill", "#056DFF")
.attr("d", function (d) {
console.log("y.bandwidth()",y.bandwidth())
return rightRoundedRect(0,Math.floor(y(d.legend_value)) , x(d.value), y.bandwidth(), 5);
});
function rightRoundedRect(x, y, width, height, radius) {
return "M" + x + "," + y
+ "h" + (width - radius)
+ "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
+ "v" + (height - 2 * radius)
+ "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
+ "h" + (radius - width)
+ "z";
}
bars.append("text")
.attr("class", "legend_value")
//y position of the legend_value is halfway down the bar
.attr("y", function (d) {
return Math.floor(y(d.legend_value)+y.bandwidth()/data.length) + Math.ceil(bar_height/2);
})
//x position is 3 pixels to the right of the bar
.attr("x", d => x(d.value)+20)
.style("font-size", function (d) {
return 10;
})
.style("font-family","sans-serif")
.style('fill', '#DCDCDC')
.text(function (d) {
return d.value;
})
//.style("text-anchor", "middle");
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x).tickSize(0));
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y).tickSize(0));
// add gray legend rect
svg.append("rect")
.attr("class", "legend_text")
.attr("x", function(d, i){
return 450 ;
})
.attr("y", function(d, i){ return 0 })
.attr("rx", "5px")
.attr("width", margin.left + margin.right-100)
.attr("height", height)
.attr("stroke", "darkgray")
.attr("fill", "#F8F8F8");
var legend_text = svg.selectAll("legend_text")
.data(data)
.enter();
legend_text.append("text")
.attr("class", "legend_text")
.attr("x", function(d, i){
return 470 ;
})
.attr("y", function(d, i){ return 20 + i*20 })
.attr("dy", "0.32em")
.style("font-weight", "bold")
.text(function(d) {
return d["legend_value"] + " " + d["label"] ;
});
</script>
</body>
Current Output: https://i.stack.imgur.com/STSHp.png
Expected Output: https://i.stack.imgur.com/5bPP4.png