Question

我是D3.J的新手，我在下面的折线图示例中可以使用它。

http://bl.ocks.org/wizicer/raw/f662a0b04425fc0f7489/

jsfiddle：Link

但是，它仅在X轴上显示年份值，但是我需要自定义文本标签，例如“ 2019年3月”，“ 2019年4月”等。 Default X axis

是否可以将下面所示的年份值（1999、2000、2001等）替换为文本标签？

  var chart = {},
    rect = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
    },
    g = 500 - rect.left - rect.right,
    h = 400 - rect.top - rect.bottom,
    i = [1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013],
    j = d3.scale.linear().range([0, g]),
    k = d3.scale.linear().range([h, 0]),
    bottomtick = d3
        .svg
        .axis()
        .scale(j)
        .tickValues([1999, 2004, 2009, 2013])
        .tickFormat(d3.format(".0f"))
        .tickPadding(10)
        .tickSize(0)
        .orient("bottom"),

源数据的格式

var skillsdata;
skillsdata = {
      "Skills": {
        "Server & WinForm": {
          "Protocol": {
            "Propose": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 30, 50, 50, 50],
            "USSD": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 60, 50, 40, 30],
            "UAP": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 60, 70, 50, 30],
            "Socket Raw": [0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 50, 50, 50, 70, 80]
          },

我的编辑

 var chart = {},
        rect = {
            top: 20,
            right: 20,
            bottom: 30,
            left: 50
        },
        g = 500 - rect.left - rect.right,
        h = 400 - rect.top - rect.bottom,
        j = d3.time.scale().domain([new Date("2014-01-01"), new Date("2016-06-01")]).range([0, 850]),
        k = d3.scale.linear().range([h, 0]),
        bottomtick = d3
            .svg
            .axis()
            .scale(j)
            .tickFormat(d3.time.format("%B %Y"))
            .tickPadding(10)
            .tickSize(0)
            .orient("bottom"),
        lefttick = d3
            .svg
            .axis()
            .scale(k)
            .tickSize(0)
            .tickPadding(10)
            .tickValues([20, 40, 60, 80, 100])
            .orient("left"),

Answer 1

d3.v3中可用的时间格式在此文档中定义：https://github.com/d3/d3-3.x-api-reference/blob/master/Time-Formatting.md。

我附上了一个片段，展示了如何实现它，希望对您有所帮助！我相信您只需要这样做：

// tick-format:
.tickFormat(d3.time.format("%B %Y"))

//scale type
d3.time.scale()

var svg = d3.select("body")
  .append("svg")
  .attr("width", 900)
  .attr("height", 100)   
            
var xScale = d3.time.scale()
  .domain([new Date("2014-01-01"), new Date("2016-01-01")])
  .range([0, 850]);
        
var xAxis = d3.svg.axis()
.scale(xScale)
.tickFormat(d3.time.format("%B %Y"))
.orient("bottom");
  
svg.append("g").call(xAxis);

<script src="https://d3js.org/d3.v3.min.js"></script>

对于此示例，如何在D3.js中用自定义标签替换X轴数值（年）？

1 个答案: