About zoom in d3.js

Hello,

I am currently studying d3.js and drawing line graphs.
JSON data for intermittent dates is passed to the x-axis, but the scale for the specified date is not displayed.
Displays the date between the specified dates.
Can't you make intermittent date data scales on the x-axis?

So I looked it up to make a graph that is easy to see with the zoom of d3.
When I searched, I found a zoom sample of numbers, but I have never seen a sample using a date.
Also, I tried writing it myself, but it didn't work well.

Is it possible to move the x-axis horizontally on the date?Also, how can I do it?

javascript d3.js

2022-09-30 20:19

1 Answers

I don't really understand what I want to do, but is it like this?

<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="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;
    vardataset= 
    [
        { date: "12/01/2015", val:10},
        { date: "12/08/2015", val:20},
        { date: "12/18/2015", val:15},
        { date: "December 19, 2015", val:35},
        { date:"2015/12/31", val:25}
    ];

    varxScale=d3.scale.linear()
        .domain([0,dataset.length-1])
        .range([5, width-5]);

    variableScale=d3.scale.linear()
        .domain ([0,40])
        .range([height-padding, 0]);

    var format = d3.time.format("%m of %d");

    // X-axis
    varxAxis=d3.svg.axis()
        .scale(xScale)
        .tickFormat(function(d,i){
            return format (new Date(dataset[i].date))
        })
        .ticks(dataset.length);

    varsvg=d3.select("body")
        .append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g");

    // Zoom (horizontal movement)
    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");

    varline=d3.svg.line()
            .x(function(d,i){returni*(width/(dataset.length-1));})
            .y(function(d){returnyScale(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>

2022-09-30 20:19

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656