d3 CSS

CSS的inline、block与inline-block

块级元素(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");

transform rotate 详解