Question

我正在尝试为我的区域创建对数刻度图y轴和使用'.ticks（）'限制我的y轴上的刻度数，但是当我使用d3.scale.Log（）时，此操作无法按预期工作。此图表的代码可以在下面找到

    import UIKit

    class ViewController: UIViewController {

    //MARK: - Countdown Timer Connections
    @IBOutlet weak var minuteLabel: UILabel!
    @IBOutlet weak var secondLabel: UILabel!

    //MARK: - Seed Connections
    @IBOutlet weak var seedSlot1: UIImageView!
    @IBOutlet weak var seedSlot2: UIImageView!
    @IBOutlet weak var seedSlot3: UIImageView!
    @IBOutlet weak var seedSlot4: UIImageView!

    //MARK: - Start/Pause Button Connection
    @IBOutlet weak var startButton: UIButton!
    @IBOutlet weak var stopButton: UIButton!
    @IBOutlet weak var pauseButton: UIButton!

    //MARK: - Variables
    var timer = Timer()

    var isTimerRunning : Bool = false
    var resumeTapped: Bool = false
    var minutes : Int = 24
    var seconds: Int = 10

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        pauseButton.setImage(nil, for: .normal)
        stopButton.setImage(nil, for: .normal)
    }



    //MARK: Timer Control Functions
    //MARK: - Start Timer
    @IBAction func startTimer(_ sender: UIButton) {
        if isTimerRunning == false {
            isTimerRunning = true
            setButtons()

            timer = Timer.scheduledTimer(
                timeInterval: 1,
                target: self,
                selector: (#selector(ViewController.updateTimer)),
                userInfo: nil,
                repeats: true
            )

            print("The timer is currently running: \(isTimerRunning)")
        } else {
            isTimerRunning = false
            setButtons()
            print("The timer is currently running: \(isTimerRunning)")
        }
        print(secondLabel.text)
    }

    //MARK: - Stop Timer
    @IBAction func stopTimer(_ sender: UIButton) {
        timer.invalidate()
        isTimerRunning = false
        seconds = 60
        minuteLabel.text = "\(minutes)"
        secondLabel.text = "\(seconds)"
        setButtons()
    }

    //MARK: - Pause Timer
    @IBAction func pauseTimer(_ sender: UIButton) {
        if resumeTapped == false {
            timer.invalidate()
            isTimerRunning = false
            setButtons()
        } else {
            startTimer(startButton)
            isTimerRunning = true
            setButtons()
        }
    }

    func timeString (time:TimeInterval) -> String {
        let secondValue = Int(time) & 60
        let minuteValue = Int(time) / 60 % 60
        return String(format: "%02i", minuteValue, secondValue)
    }

    //MARK: - Update Timer
    @objc func updateTimer() {
        seconds -= 1     //This will decrement(count down)the seconds.
        secondLabel.text = timeString(time: TimeInterval(seconds)) //This will update the seconds text label
    }

还在https://codepen.io/dsc1213/pen/pxVgrw处提供了链接。知道如何解决这个问题吗？

Answer 1

从文档https://github.com/d3/d3-3.x-api-reference/blob/master/Quantitative-Scales.md#log_ticks

请注意，由于对数刻度的性质，刻度数量无法自定义；

tickFormat()搞砸了

搭配使用看起来更好

var y_axis = d3.svg.axis().scale(scale_y).orient("left");

我想使用s格式的显示屏时，它会为每个刻度线显示数字

编辑

如果我使用D3v5，我可以获得更好的结果。

var y_axis = d3.axisLeft(scale_y).tickArguments([5,".0s"]);

var svg_width = 500,
    svg_height = 250,
    margin = {left:50, right: 20, top:30, bottom:30},
    g_width = svg_width - margin.left - margin.right,
    g_height = svg_height - margin.top - margin.bottom

var data = [0.1, 30, 100, 300, 600, 1212]


var scale_x = d3.scaleLinear().domain([0, data.length-1]).range([0, g_width]),
    scale_y = d3.scaleLog().base( 10 ).domain([0.1, d3.max(data)]).range([g_height, 0])

var svg = d3.select("#container")
.append("svg:svg")
.attr("width", svg_width)
.attr("height", svg_height)

var g = svg.append("svg:g")
.attr("width", g_width)
.attr("height", g_height)
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")

var area = d3.area()
.x(function(d,i) { return scale_x(i); })
.y0(g_height)
.y1(function(d) { return scale_y(d); })
.curve(d3.curveCardinal)

g.append("svg:path")
.attr("d", area(data))
.style("fill", "steelblue");

var x_axis = d3.axisBottom(scale_x).ticks(5);
var y_axis = d3.axisLeft(scale_y).tickArguments([5,".0s"]);

g.append("svg:g")
.call(x_axis)
.attr("transform", "translate(0," + g_height + ")")

g.append("svg:g")
.call(y_axis)
.append("text")
.text("Price($)")
.attr("transform", "rotate(-90)")
.attr("text-anchor", "end")
.attr("dy", "1em")
.attr("fill", "black")

#container {
  width: 500px;
  height: 250px;
}

path {
  fill: none;
  stroke: steelblue;
  stroke-width: 2;
}

text {
  font-size: 12px;
  font-family: arial;
}

.domain, .tick line {
  stroke: gray;
  stroke-width: 1;
}

<script src="http://d3js.org/d3.v5.js"></script>
<div id = "container"></div>

使用d3.scaleLog（）限制面积图上的刻度线数量

1 个答案: