Я пытаюсь создать сгруппированный график следующим образом: https://bl.ocks.org/mbostock/3887051.
Это мой код:
var width = "100%";
var height = "96vh";
var canvas = d3.select("body")
.append('svg')
.attr('width',width)
.attr('height', height)
.style("border", "2px solid black");
var canvasWidth= parseInt(canvas.style("width"));
var canvasHeight= parseInt(canvas.style("height"));
var y0 = d3.scaleBand()
.paddingInner(0.1)
.rangeRound([0, canvasHeight]);
var y1 = d3.scaleBand()
.padding(0.08);
var x = d3.scaleLinear()
.range([0, canvasWidth]);
var z = d3.scaleOrdinal()
.range(["blue","green"])
d3.csv("data.csv", data =>{
console.log(data);
//inner columns domain
var keys = d3.keys(data[0]).slice(1,4);
data.forEach(d=>{
d.properties = keys.map(key => {return {key:key, value:+d[key]}})
});
//console.log(data[1].properties);
var max = d3.max(data, d=>d['Open rate'])
x.domain([0,max]);
y0.domain(data.map(d => d.Industry));
y1.domain(keys).rangeRound([0,y0.bandwidth()]);
console.log(x(data[1].properties[1].value))
console.log(keys);
var all= canvas.append("g")
.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", d => {"translate(0, "+ y0(d.Industry) + ")"});
//console.log(y0(data[1].Industry));
all .selectAll("rect")
.data(d=>d.properties)
.enter()
.append("rect")
.attr("y", d=>y1(d.key))
.attr("x", 0)
.attr("height", y1.bandwidth())
.attr("width", d =>x(d.value));
});
Это , как выглядят результаты прямо сейчас. (Я не знаю, как еще показать результаты, так как я работаю над локальным файлом)
Все бары отображаются, но y-перевод группы графиков: .attr("transform", d => {"translate(0, "+ y0(d.Industry) + ")"}); не происходит.
Это соответствующий HTML (чтобы показать, что все выглядит хорошо, кроме y-перевода):
<svg width="100%" height="96vh" style="border: 2px solid black;">
<g>
<g>
<rect y="1" x="0" height="8" width="175.42504409171076"></rect>
<rect y="10" x="0" height="8" width="23.790123456790127"></rect>
<rect y="19" x="0" height="8" width="98.05291005291006"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="256.26807760141094"></rect>
<rect y="10" x="0" height="8" width="44.326278659612"></rect>
<rect y="19" x="0" height="8" width="125.09700176366843"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="247.15696649029985"></rect>
<rect y="10" x="0" height="8" width="37.81834215167549"></rect>
<rect y="19" x="0" height="8" width="110.7072310405644"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="179.7636684303351"></rect>
<rect y="10" x="0" height="8" width="33.118165784832456"></rect>
<rect y="19" x="0" height="8" width="133.19576719576722"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="241.58906525573192"></rect>
<rect y="10" x="0" height="8" width="42.373897707231045"></rect>
<rect y="19" x="0" height="8" width="126.90476190476191"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="187.9347442680776"></rect>
<rect y="10" x="0" height="8" width="38.10758377425044"></rect>
<rect y="19" x="0" height="8" width="146.71781305114638"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="185.04232804232805"></rect>
<rect y="10" x="0" height="8" width="35.4320987654321"></rect>
<rect y="19" x="0" height="8" width="138.5467372134039"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="259.23280423280426"></rect>
<rect y="10" x="0" height="8" width="38.90299823633157"></rect>
<rect y="19" x="0" height="8" width="108.5379188712522"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="120.97530864197532"></rect>
<rect y="10" x="0" height="8" width="20.825396825396826"></rect>
<rect y="19" x="0" height="8" width="124.30158730158732"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="210.78483245149914"></rect>
<rect y="10" x="0" height="8" width="28.634920634920636"></rect>
<rect y="19" x="0" height="8" width="98.1252204585538"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="266.39153439153444"></rect>
<rect y="10" x="0" height="8" width="36.516754850088184"></rect>
<rect y="19" x="0" height="8" width="99.06525573192239"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="246.9400352733686"></rect>
<rect y="10" x="0" height="8" width="43.820105820105816"></rect>
<rect y="19" x="0" height="8" width="128.35097001763668"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="200.01058201058203"></rect>
<rect y="10" x="0" height="8" width="23.42857142857143"></rect>
<rect y="19" x="0" height="8" width="84.74779541446209"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="287"></rect>
<rect y="10" x="0" height="8" width="34.998236331569665"></rect>
<rect y="19" x="0" height="8" width="88.29100529100529"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="180.70370370370372"></rect>
<rect y="10" x="0" height="8" width="30.298059964726637"></rect>
<rect y="19" x="0" height="8" width="121.19223985890655"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="234.93650793650795"></rect>
<rect y="10" x="0" height="8" width="32.17813051146385"></rect>
<rect y="19" x="0" height="8" width="98.99294532627866"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="185.18694885361552"></rect>
<rect y="10" x="0" height="8" width="29.502645502645503"></rect>
<rect y="19" x="0" height="8" width="115.26278659611992"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="185.04232804232805"></rect>
<rect y="10" x="0" height="8" width="27.76719576719577"></rect>
<rect y="19" x="0" height="8" width="108.61022927689595"></rect>
</g>
<g>
<rect y="1" x="0" height="8" width="179.47442680776015"></rect>
<rect y="10" x="0" height="8" width="29.430335097001766"></rect>
<rect y="19" x="0" height="8" width="118.51675485008819"></rect>
</g>
</g>
</svg>