Javascript 自定义记号变换属性

水平轴，日期时间

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

标度（x）上的范围为[01100]

输出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>
    ...

---

你为什么要这么做？通过设置输入/输出域，您应该能够将记号放置在任意位置。是的-如果我将范围设置为容器的末端，记号显示良好。我想做的是相对于容器宽度放置它们，所以如果它改变，记号的位置将调整。我意识到这可能是一种CSS思维模式——我对灵活图形的其他想法持开放态度。这些勾号

元素的属性是否不可触摸？如果您自己计算位置，您只需在生成元素后选择元素，并相应地修改

转换

属性。AFAIK d3本身不支持该属性的任何自定义。

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);