Question

我正在绘制一个带有轴的条形图，yScale在我的yAxis上的行为与我附加的条形图的行为不同。

我将yScale范围设置为从（h-yPadding）开始，为xAxis标签留下额外的空间。

                var yScale = d3.scale.linear()
                            .domain([0, d3.max(val)])
                            .range([h - yPadding, 0]);

- 范围被反转，否则我的yAxis标签是颠倒的。

当我使用yScale调用yAxis时，它会服从（h - yPadding）的起点并在底部留出空间。

但所有＆＃34; rects＆＃34;即使我在这些＆＃34; rects＆＃34;就像在yAxis上一样。

如果我将范围更改为[h，0]而不是[h - yPadding，0]，则只有yAxis会对更改作出反应，并且条形图仍然从h开始。

为什么条形图会忽略yScale？

    <script type="text/javascript">
        var xhr = new XMLHttpRequest();

        function makeRequest(){
            xhr.open("GET", "https://api.coinmarketcap.com/v1/ticker/", true);
            xhr.send();
            xhr.onreadystatechange = processRequest;
        }

        function processRequest(){
            console.log("testing, state: ", xhr.readyState)
            if(xhr.readyState == 4 && xhr.status == 200){
                dataset = [];
                for(var i = 0; i < 10; i++){
                    addingId = JSON.parse(xhr.responseText)[i];
                    addingId.id = i;
                    dataset.push(addingId);
                }
                console.log("this is dataset: ", dataset);
                makeChart();
            }
        }

        function makeChart(){
            var w = 1000;
            var h = 600;
            var padding = 40;
            var yPadding = 80;

            var val = [];
            dataset.forEach(function(ele){
                val.push(parseInt(ele.market_cap_usd));
            })
            var max = d3.max(val)

            var xAxisNames = []

            dataset.forEach(function(ele){ xAxisNames.push(ele.name); })
            // console.log(">>>>>>>>", xAxisNames)

            var xScale = d3.scale.ordinal()
                            .domain(d3.range(dataset.length))
                            .rangeRoundBands([padding, w - padding], 0.05)

            var yScale = d3.scale.linear()
                            .domain([0, d3.max(val)])
                            .range([h - yPadding, 0]);

            var yAxis = d3.svg.axis()
                            .scale(yScale)
                            .orient("left")
                            .tickFormat(function(d){
                                if(d > 0){ return d / 1000000000 + " b"; }
                                return "";
                            })

            var xAxis = d3.svg.axis()
                            .scale(xScale)
                            .orient("bottom")
                            .tickFormat(function(d, i){
                                return xAxisNames[i]
                            })

            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 xScale(i);
                })
                .attr("y", function(d){
                    return yScale(d.market_cap_usd);
                })
                .attr("width", xScale.rangeBand())
                .attr("height", function(d, i){
                    return h - yScale(d.market_cap_usd)
                })

            svg.append("g")
                .attr("class", "y axis")
                .attr("transform", "translate(" + padding + ", 0)")
                .call(yAxis);

            svg.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0, " + (h - yPadding) + ")")
                .call(xAxis)
                .selectAll("text")
                .attr("y", 15)
                .attr("font-size", 12)
                .attr("x", xScale.rangeBand() / 2)
                .attr("transform", "rotate(45)")
        }

        makeRequest();

    </script>

Answer 1

缩放只是将输入域映射到输出范围，仅此而已。您必须相应地设置SVG元素的位置和尺寸。我们来看看：

现在，根据您的比例，当您传递它的域中的最小值时，它将返回：

index = this.props.applications.map(obj => obj.videoId[0])

当然，您希望这些条的高度为零像素。为了得到零，方程式很简单，你必须从该值中减去：

SELECT DISTINCT a.ID, a.PNO, a.SEQ
FROM XYZ a
JOIN XYZ b on a.SEQ = b.SEQ AND a.ID > b.ID

这将使您在域中的最小值为零。

因此，这应该是矩形的高度：

h - yPadding

PS ：顺便说一句，在D3中，缩放确定SVG元素尺寸的少数几种情况之一是轴生成器创建的路径/线。这就是你在轴上看到不同行为的原因。

yScale表现不一致d3.js

1 个答案: