d3.js - x轴上的对数放大

时间:2013-12-26 06:58:33

标签: javascript jquery d3.js

请在下面找到代码和fiddle

var width = 900,
padding = 30;

var yScale = d3.scale.linear()
            .domain([0,0 ])   
            .range([0, 0]);   


var xScale = d3.scale.linear()
            .domain([-2000000000,2000000000])        
            .range([(padding/2), width - padding * 2]); 

   // console.log('hi');

var yAxis = d3.svg.axis()
            .orient("left")
            .scale(yScale);

        // define the y axis
var xAxis = d3.svg.axis()
            .orient("bottom")
            .scale(xScale)
            .ticks(5)
            .tickSubdivide(10)
            .tickSize(-60,-60,60)
           .tickFormat(function (d) { return toYear(d);});

var containerSvg =  d3.select("#primaryTimelineBackground").append("svg")
                            .attr("class","primaryTimelineSvg")
                            .attr("width", "850px")
                            .attr("height","100px");

           containerSvg.selectAll("line.x")
                          .data(xScale.ticks(50))
                          .enter().append("line")
                          .attr("class", "xMinor")
                          .attr("x1", xScale)
                          .attr("x2", xScale)
                          .attr("y1", -45)
                          .attr("y2", 45)
                          .style("stroke", "#808080");

                        containerSvg.selectAll("line.x")
                          .data(xScale.ticks(5))
                          .enter().append("line")
                          .attr("class", "x")
                          .attr("x1", xScale)
                          .attr("x2", xScale)
                          .attr("y1", -50)
                          .attr("y2", 50)
                          .style("stroke-width",3)
                          .style("stroke", "#808080");

            // draw y axis with labels and move in extentStart the size by the amount of padding
            containerSvg.append("g")
                    .attr("transform", "translate(200,0)")
                    .call(yAxis);


            containerSvg.append("g")
                    .attr("class", "primaryXAxis")  
                    .attr("transform", "translate(0,40)")
                    .call(xAxis);

var zoom = d3.behavior.zoom().x(xScale).on("zoom");

我想在时间轴上应用对数缩放。此处缩放距离可由brushextent管理,如果我使用Math.log(xScale),则会引发错误。所以问题是如果应用了日志,地图x-axis如何。

如何使d3变焦对数?????

0 个答案:

没有答案