

こんにちは

現在d3.jsを勉強していて線グラフを描画させています。  
x軸に間欠的な日付のJSONデータを渡しているのですが、指定した日付の目盛が表示されません。  
指定した日付の間の日付が表示されてしまいます。  
x軸で間欠的な日付データの目盛は作れないのでしょうか。

それで、d3のzoomで見やすいグラフを作ろうと思い調べたのですが  
検索しても数値のzoomサンプルはあるのですが日付を使ったサンプルを見たことがありません。  
また、自分で書いてみてもうまく動作することができませんでした。

日付でのx軸の横移動はできるのでしょうか。また、どうやってやればいいのでしょうか。


CC BY-SA 3.0
2015-12-09T12:39:54.760
19815
2015-12-10T06:58:51.003
13598
question
javascript d3.js
d3.jsのzoomについて


やりたいことがいまいち良く分かっていませんがこのようなことでしょうか？

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="UTF-8">
    <style>
        .line {
            fill: none;
            stroke: Red;
            stroke-width: 1.5px;
        }
        .axis path,
        .axis line {
           fill: none;
           stroke: black;
           shape-rendering: crispEdges;
        }
        .axis text {
           font-family: sans-serif;
           font-size: 11px;
        }
        .overlay {
            fill: none;
            pointer-events: all;
        }
    
    </style>
    </head>
    <body>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script>
        var width = 500;
        var height = 300;
        var padding = 50;
        var dataset = 
        [
            { date:"2015/12/01", val:10 },
            { date:"2015/12/08", val:20 },
            { date:"2015/12/18", val:15 },
            { date:"2015/12/19", val:35 },
            { date:"2015/12/31", val:25 }
        ];
    
        var xScale = d3.scale.linear()
            .domain([0, dataset.length - 1])
            .range([5, width - 5]);
    
        var yScale = d3.scale.linear()
            .domain([0, 40])
            .range([height - padding, 0]);
    
        var format = d3.time.format("%m/%d");
    
        // X軸
        var xAxis = d3.svg.axis()
            .scale(xScale)
            .tickFormat(function(d, i) {
                return format(new Date(dataset[i].date))
            })
            .ticks(dataset.length);
    
        var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g");
    
        // ズーム（水平移動）
        svg.append("rect")
            .attr("class", "overlay")
            .attr("width", width)
            .attr("height", height)
            .call(d3.behavior.zoom()
                .scaleExtent([1, 1])
                .on("zoom", zoom));
    
        svg.append("g")
            .attr("class", "axis")
            .attr("transform", "translate(0, " + (height - padding) + ")")
            .call(xAxis)
            .selectAll("text")
            .attr("x", 10)
            .attr("y", -5)
            .attr("transform", "rotate(90)")
            .style("text-anchor", "start");
    
        var line = d3.svg.line()
                .x(function(d, i) { return i * (width / (dataset.length - 1)); })
                .y(function(d) { return yScale(d["val"]); });
    
        svg.append("path")
            .datum(dataset)
            .attr("class", "line")
            .attr("d", line);
    
        function zoom() {
            svg.attr("transform", "translate(" + d3.event.translate[0] + ")");
        }
    </script>
    </body>
    </html>
    
[/code]


CC BY-SA 3.0
2015-12-10T06:58:51.003
19844
2015-12-10T06:58:51.003
13314
19815
answer