實現(xiàn)簡單柱狀圖
<div class="myddd"></div>
????var data = [10, 5, 12, 15];
? ? var width = 300
? ? const scaleFactor = 10;
? ? const barHeight = 30;
? ? var graph = d3.select(".myddd")
? ? ? .append("svg")
? ? ? .attr("width", width)
? ? ? .attr("height", barHeight * data.length);
? ? // bar的每個rect設(shè)置向下平移
? ? var bar = graph.selectAll("g")
? ? ? .data(data)
? ? ? .enter()
? ? ? .append("g")
? ? ? .attr("transform", function(d, i) {
? ? ? ? return "translate(0," + i * barHeight + ")";
? ? ? });
? ? // 設(shè)置rect的寬高和填充色
? ? bar.append("rect").attr("width", function(d) {
? ? ? return d * scaleFactor;
? ? })
? ? .attr("height", barHeight - 5)
? ? .attr("fill", 'cyan');
? ? // 增加文本顯示嗡综、設(shè)置文本位置
? ? bar.append("text")
? ? ? .attr("x", function(d) { return (d*scaleFactor + 3); })
? ? ? .attr("y", barHeight/2-3)
? ? ? .attr("dy", ".35em")
? ? ? .text(function(d) { return d; });
