d3 CSS
块级元素(block):独占一行,对宽高的属性值生效;如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽。
行内元素(inline):可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高。
行内块元素(inline-block):结合的行内和块级的优点,既可以设置长宽,可以让padding和margin生效,又可以和其他行内元素并排。
旋转-坐标轴文字方向
有时间坐标轴的文字挤在一起、相互重叠,使用rotate可以改变文字的展示方向
//Define X axis var xAxis = d3.axisBottom(x) .ticks(15) .tickFormat(i => data[i].name) .tickSizeOuter(0); //Create X axis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(xAxis) .selectAll("text") .attr("dy", ".55em") .attr("transform", "rotate(30)") .style("text-anchor", "start");