0

横轴，日期时间

var xAxis = d3.svg.axis()
    .scale(x)
    .orient('bottom')
    .ticks(d3.time.hours, 3)
    .tickSize(-200)

scale(x) 的范围是 [0, 100]

输出 SVG XML

<g class="xAxis" transform="translate(0, 182)">
    <g style="opacity: 1;" transform="translate(0,0)">
        <line class="tick" y2="-200" x2="0"></line>
        <text y="3" x="0" dy=".71em" style="text-anchor: middle;">Tue 15</text>
    </g>
    <g style="opacity: 1;" transform="translate(12.5,0)">
        <line class="tick" y2="-200" x2="0"></line>
        <text y="3" x="0" dy=".71em" style="text-anchor: middle;">03 AM</text>
    </g>
    <g style="opacity: 1;" transform="translate(25,0)">
        <line class="tick" y2="-200" x2="0"></line>
        <text y="3" x="0" dy=".71em" style="text-anchor: middle;">06 AM</text>
    </g>
    ...

只是不知道如何进入该变换属性并使用翻译百分比代替=>（0％，12.5％，25％，等等......）

完整代码

var width = 960;
var height = 200;
var container = d3.select(".timeTable")
var svg = container.append("svg")
    .attr("width", "100%")
    .attr("height", height)
var roomID = container.attr("data-room")

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])
        .range([0, 100])
    // define x axis
    var xAxis = d3.svg.axis()
        .scale(x)
        .orient('bottom')
        .ticks(d3.time.hours, 3)
        .tickSize(-200)
    // 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 - 18) + ")")
        .call(xAxis)
}

d3.json("/time/get/" + roomID, draw);
4

0 回答 0