d3 条形图上消失的自定义刻度值

Question

我的项目以离散的时间间隔测量信号功率水平，我试图在条形图中表示它。由于频率是离散的，所以我尝试使用数组设置刻度值，当我提供 [1, 2] 时它们工作正常，但当我提供更大的值时它们表现得很奇怪。

下面是代码，我现在只是尝试使用本地数据，因为我是 D3 的新手。

<body>
        <script type="text/javascript">
            //Width and height
            var w = 1000;
            var h = 500;
            var barPadding = 1;  // padding space to distinguish bars
            var axisSpace = 25;

            var dataset =[200,40];
            var tix = [55,57]

            // SCALES
            var xscale = d3.scale.linear()
                                .domain([0, dataset.length])
                                .range([0,w]);
            var yscale = d3.scale.linear()
                                .domain([0,d3.max(dataset,function(d){return d;})])
                                .range([0,h]);

            //AXES
            var xAxis = d3.svg.axis()
                            .scale(xscale)// define simple axis function with scales
                            .orient("top")  // define the orientation of labels
                            .tickValues(tix);
            var yAxis = d3.svg.axis(yscale);




            //Create SVG element
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h)


            svg.selectAll("rect")
               .data(dataset)
               .enter()
               .append("rect")
               .attr("x", function(d, i) {
                    return i * (w / dataset.length);
               })
               .attr("y", function(d) {
                    return h - yscale(d);
               })
               .attr("width", w / dataset.length - barPadding)
               .attr("height", function(d) {
                    return (yscale(d) - axisSpace);
               })
               .attr("fill", function(d) {
                    return "rgb(0, 0, " + (d * 550) + ")";
               });


               // call axis function on svg element
               svg.append("g")  // append new group to save all axes
                    .attr("class", "axis")  // assign it a class so we can target it using CSS
                    .attr("transform", "translate(0, 477)") // 477 = h - axisSpace + 2
                    .call(xAxis); // call axis function

        </script>
    </body>

Answer 1

这一行：

.domain([0, dataset.length])

将您的域从 0 设置为 2。您的报价：

var tix = [55,57]

不在这个域内，所以你没有标记。

也许你想要：

.domain(tix)

例子here.

d3 条形图上消失的自定义刻度值

Custom tick values disappearing on d3 bar plot

d3.js