1

我正在玩 D3 并希望刻度线穿过垂直轴上的线性时间图。刻度线元素在那里，具有正确的向量，但它们没有出现。相反，出现的是与刻度标签水平运行的路径元素。

JSFiddle 链接

var width = 960;
var height = 200;
var container = d3.select(".timeTable");
var svg = container.append("svg")
    .attr("width", width)
    .attr("height", height);
var roomID = container.attr("data-room");
var times = [
    {"from":"2012-12-27 00:00:00","until":"2012-12-27 12:00:00"},
    {"from":"2012-12-27 00:00:00","until":"2012-12-27 23:59:00"},
    {"from":"2012-12-27 02:00:00","until":"2012-12-27 04:00:00"},
    {"from":"2012-12-27 03:00:00","until":"2012-12-27 21:00:00"},
    {"from":"2012-12-27 03:30:00","until":"2012-12-27 04:50:00"},
    {"from":"2012-12-27 05:00:00","until":"2012-12-27 12:00:00"},
    {"from":"2012-12-27 09:00:00","until":"2012-12-27 15:00:00"},
    {"from":"2012-12-27 13:00:00","until":"2012-12-27 23:00:00"},
    {"from":"2012-12-27 13:00:00","until":"2012-12-27 23:30:00"},
    {"from":"2012-12-27 20:00:00","until":"2012-12-27 23:59:00"},
    {"from":"2012-12-27 20:00:00","until":"2012-12-27 22:00:00"},
    {"from":"2012-12-27 23:00:00","until":"2012-12-27 23:30:00"},
    {"from":"2012-12-28 01:00:00","until":"2012-12-28 13:00:00"}
];
function draw(times) {
    // domain
    var floor = d3.time.day.floor(d3.min(times, function (d) { return new Date(d.from); }));
    var ceil = d3.time.day.ceil(d3.max(times, function (d) { return new Date(d.until); }));
    // define linear time scale
    var x = d3.time.scale()
        .domain([floor, ceil])
        .rangeRound([0, width]);
    // define x axis
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(d3.time.hours, 6)
        .tickSize(4);
    // draw time bars
    svg.selectAll("rect")
        .data(times)
        .enter().append("rect")
            .attr("class", "timeRange")
            .attr("width", function (d, i) { return x(new Date(d.until)) - x(new Date(d.from)); })
            .attr("height", "10px")
            .attr("x", function (d, i) { return x(new Date(d.from)); })
            .attr("y", function (d, i) { return i * 11; });
    // draw x axis
    svg.append("g")
        .attr("class", "xAxis")
        .attr("transform", "translate(0, " + (height - 23) + ")")
        .call(xAxis);
}
draw(times);

生成的路径元素只是与记号重叠，但即使删除了路径，记号也是不可见的。

此处显示了所需的刻度效果人口金字塔- 垂直轴上的刻度有一条线穿过图表的其余部分。

对于时间尺度，我需要注意不同的行为吗？

非常感激。

铬 23，D3 v3

4

3 回答 3

1

将刻度线放入绘图区域的技巧是实际制作第二个轴并隐藏标签。所以你的代码加上网格线看起来像（小提琴）：

// draw x axis
var xAxisLine = svg.append("g")
    .attr("class", "xAxis")
    .attr("transform", "translate(0, " + (height - 23) + ")")
    .call(xAxis);

xAxisLine.selectAll("path.domain").attr("stroke","black").style('fill','none');
xAxisLine.selectAll("line.tick").style('stroke','black');

xAxis.tickSize(height-23);
var xAxisLineOver = svg.append("g")
    .attr("class", "xAxis-overlay")
    .attr("transform", "translate(0,0)")
    .call(xAxis);

xAxisLineOver.selectAll("path.domain").attr("stroke-width",0).style('fill','none');
xAxisLineOver.selectAll("line.tick").style('stroke','red');
xAxisLineOver.selectAll("text").text("");
于 2013-01-08T21:20:38.907 回答
1

我不确定这与我遇到的问题完全相同。对我有用的是：

.tick line{ 
  stroke: black
}

于 2016-03-18T11:08:49.663 回答
0

Chrome 在渲染 SVG 方面非常严格。所以请记住这一点：

  1. 对于轴，请指定其完整的 RGB 值（因此 #ff0000 而不是仅 #f00）。

  2. 路径笔触宽度很棘手。如果它们小于 1 (px) 并且您已包含

    形状渲染：crispEdges；

在 CSS 样式中，任何 Web 浏览器都可能不会显示这样的路径（或者当图表调整为不同大小时）。

在这种情况下，评论或删除“crispEdges”渲染，你应该没问题（尽管在这种情况下你让浏览器做出平滑决定）。

于 2020-05-09T16:00:06.030 回答