Question

我有一张图表，它运行正常。但唯一的问题是，我想减少Backbone.sync = function(method, model, options) { var type = methodMap[method]; // Default options, unless specified. _.defaults(options || (options = {}), { emulateHTTP: Backbone.emulateHTTP, emulateJSON: Backbone.emulateJSON }); // Default JSON-request options. var params = {type: type, dataType: 'json'}; // Ensure that we have a URL. // if (!options.url) { // params.url = _.result(model, 'url') || urlError(); // } if (!options.url) { if(model.urlExtended) { // type is GET, POST... // options are what you passed to fetch, save, etc.. as options params.url = model.urlExtended(type, options); } else { params.url = _.result(model, 'url') || urlError(); } } ... rest of Backbone.sync code..如何做到这一点？

示例：我当前的图表的刻度从tick-size.开始到0，它计为100个数字。（按10）如何将其减少到11个数字例如从6开始到以0结尾 - 但不是100重复10重复20，0，{{1} }，20 ..？

这是我的代码：

Live Demo

Answer 1

我更新了这样的刻度值：

$(function(){
 var m = [80, 80, 80, 80]; // margins
        var w = 300; // width
        var h = 450; // height

        var plan = 55;
        var actual = 38;
        var variation = plan - actual;

        var data = [0,plan];
        var data1 = [0,actual];

        var x = d3.scale.linear().domain([0, 1.25]).range([0, w]);
        var y = d3.scale.linear().domain([0, 100]).range([h, 0]);


        var line = d3.svg.line()

            .x(function(d,i) { 
                return x(i); 
            })
            .y(function(d) { 

                return y(d); 
            })


            var graph = d3.select("#graph").append("svg:svg")
                  .attr("width", w + m[1] + m[3])
                  .attr("height", h + m[0] + m[2])
                .append("svg:g")
                  .attr("transform", "translate(" + m[3] + "," + m[0] + ")");

            var yAxisLeft = d3.svg.axis()
            .scale(y)
            .tickValues(d3.range(0, 120, 20))
            .tickSize(-w)
            .orient("left");



            graph.append("svg:g")
                  .attr("class", "y axis")
                  .attr("transform", "translate(-0,0)")
                  .call(yAxisLeft);


                graph.append("svg:path").attr("d", line(data));
            graph.append("svg:path").attr("d", line(data1));

            //not able to fill the bg between 2 lines

            var area = d3.svg.area()
      .x(function(d, i) { return x(i) })
      .y0(function(d, i) { return y(data[i]); })
      .y1(function(d, i) {  return y(data1[i]); })

    graph.append("path")
      .datum(data)
      .attr("d", area)
      .attr("fill", "brown")
      .style("opacity", 0.5);

});

Live Demo

如何使用d3js控制图表中的刻度值数量

1 个答案: