Question

以下是我的绘制轴代码：

            var seasons = ["summer", "winter", "fall", "spring"];
            var margin = {top:80, right:30, bottom:30, left:30},
                width = 1200 - margin.right - margin.left,
                height = 800 - margin.top - margin.bottom;

            var x = d3.scale.ordinal()
                    .domain(seasons)
                    .rangeRoundBands([0, width], 0.9);

            xAxis = d3.svg.axis()
                    .scale(x)
                    .tickSize(4, 6)
                    .tickPadding(6)
                    .orient("bottom");

            var svg = d3.select("body").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            svg.append("g")
                    .attr("class", "x axis")
                    .attr("transform", "translate(0," + height + ")")
                    .call(xAxis);

        </script>

但是，tickPadding函数现在会在序数轴类别之间引入空格。

更具体地说，我希望轴的夏季，冬季，秋季和弹簧部分彼此分开，有点像虚线。我怎么能得到这个？

Answer 1

我不知道d3轴内置的任何方法可以实现此目的，但您可以删除它绘制的路径并用虚线替换它，如下所示：

// Draw the axis, as you currently are
var axisElem = svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

// Remove the line
axisElem.selectAll("path.domain").remove();

// Figure out how big each dash should be
var gapFraction = 0.1; // The portion of the line that should be a gap
var total = x(seasons[1]) - x(seasons[0]);
var dash = total * (1 - gapFraction);
var gap = total * gapFraction;

// Draw the dashed line
axisElem.append("line")
    .classed("domain", true)
    .attr("x1", x(seasons[0]) - dash / 2 + gap / 2)
    .attr("x2", x(seasons[seasons.length - 1]) + dash / 2 - gap / 2)
    .attr("y1", 0)
    .attr("y2", 0)
    .attr("stroke", "black")
    .attr("stroke-dasharray", dash + "," + gap);

如何在d3中拆分序号轴？

1 个答案: