Question

我使用D3（V4）创建了一个瀑布图，其中y轴为三个值（刻度）。

自动计算x轴刻度值。

如何在x轴上添加额外的刻度值（今天＆＃39; s日期）？

            function risklevels(d) {
                if (d <= 25 && d >= 13.5) {
                    return "High";
                } else if (d <= 13.5 && d > 7) {
                    return "Med";
                }
                return "Low";
            }  

           function drawWaterfall(){
                var margin = {top: 20, right: 20, bottom: 30, left: 50};
                var width = 800 - margin.left - margin.right;
                var height = 400 - margin.top - margin.bottom;

                dt = new Date();   
                var x = d3.scaleTime()
                          .rangeRound([0, width]);
                var y = d3.scaleLinear()
                          .rangeRound([height, 1]);

                var xAxis = d3.axisBottom(x);           

                var yAxis = d3.axisLeft(y).tickFormat(risklevels).tickValues([4, 10.25, 19.125]);

                var parseDate = d3.timeParse("%Y-%m-%d");

                var riskwaterfall = d3.select('#riskwaterfall').append('svg')
                                      .attr('width', width + margin.left + margin.right)
                                      .attr('height', height + margin.top + margin.bottom)
                                      .append('g')
                                      .attr('transform', 'translate('+margin.left+','+margin.top+')');


                riskwaterfall.append('rect')
                  .attr('class', 'high')
                  .attr("x", 0) // start rectangle on the good position
                  .attr("y", 0) // no vertical translate
                  .attr("width", width) // correct size
                  .attr("height", height*((25.0-13.5)/25.0) + height*0.5/25)
                  .attr("fill", "#ee0000"); // full height 

                riskwaterfall.append('rect')
                  .attr('class', 'high')
                  .attr("x", 0) // start rectangle on the good position
                  .attr("y", height*((25.0-13.5)/25.0) + height*0.5/25.0) // no vertical translate
                  .attr("width", width) // correct size
                  .attr("height", height*((13.5-7.0)/25.0) + height*0.5/25.0)
                  .attr("fill", "#eeee00"); // full height 

                riskwaterfall.append('rect')
                  .attr('class', 'high')
                  .attr("x", 0) // start rectangle on the good position
                  .attr("y", (25-7)*height/25 + height*0.5/25.0)// no vertical translate
                  .attr("width", width) // correct size
                  .attr("height", 7*height/25 - height*0.5/25.0)
                  .attr("fill", "#00ee00"); // full height


               var line = d3.line()
                    .curve(d3.curveStepAfter)
                    .x(function(d) { return x(d.date); })
                    .y(function(d) { return y(d.risk); });

               line('step-after');   

               risk.forEach(function(d) {
                    d.date = parseDate(d.date);
                    d.risk = +d.risk;  
                });

                x.domain(d3.extent(risk, function(d) { return d.date; }));
                y.domain(d3.extent(risk, function(d) { return d.risk; }));

                riskwaterfall.append('g')
                  .attr('class', 'x axis')
                  .attr('transform', 'translate(0,'+height+')')
                  .call(xAxis);



                riskwaterfall.append('g')
                  .attr('class', 'y axis')
                  .call(yAxis)
                  .append('text')
                  .attr('transform', 'rotate(-90)')
                  .attr('y', 6)
                  .attr('dy', '.71em')
                  .style('text-anchor', 'end');


                riskwaterfall.append('path')
                      .datum(risk)
                      .attr('d', line(risk));   

                for (var i = 0; i < risk.length; i++)
                    riskwaterfall.append('circle')
                             .datum(risk[i])
                             .attr("cx", function(d) { return x(d.date); })
                             .attr("cy", function(d) { return y(d.risk); })
                             .attr("stroke-width", "2px")
                             .attr("fill", "black" )
                             //.attr("fill-opacity", .5)
                             //.attr("visibility", "hidden")
                             .attr("r", 5);                                
               }

Answer 1

现在，您正在为今天创建一个新日期：

dt = new Date();

但这对x比例（轴生成器使用）没有影响。所以，而不是：

x.domain(d3.extent(risk, function(d) { return d.date; }));

仅转到risk数据中的最大日期，它应为：

x.domain([d3.min(risk, function(d) { return d.date; }), dt]);

之后，为确保显示最后一个勾号，您可以使用nice()或在结果值中连接结束域。

D3.js - 在x轴上添加刻度值（日期格式）

1 个答案: