Question

请使用简单的index.html缩放版<{1}}查看此d3.js：

    <body>
    <script>
        var canvasWidth = 750;
        var canvasHeight = 600;

        // Setup scales
        d3.json("tt.json", 
                function(data)
                {
                    var widthScale = d3.scaleLinear()
                                        .domain([0, 3])
                                        .range(0, canvasWidth);

                    var colorScale = d3.scaleLinear()
                                        .domain([0, 10])
                                        .range(["red", "blue"]);

                    var canvas = d3.select("body")
                                    .append("svg")
                                    .attr("width", canvasWidth)
                                    .attr("height", canvasHeight)

                    canvas.selectAll("rect")
                            .data(data)
                            .enter()
                                .append("rect")
                                .attr("width", function(d) { return widthScale(d.t_count); })
                                .attr("height", 30)
                                .attr("y", function(d, i) { return i * 50; })
                                .attr("fill", "blue")

                    canvas.selectAll("text")
                            .data(data)
                            .enter()
                            .append("text")
                            .attr("fill", "black")
                            .attr("y", function(d, i) { return (i * 50 + 22); })
                            .text(function(d) { return d.ttext; })
                }) // of function(data)             
    </script>
</body>

服务器上的.json文件如下所示：

[{"ttext":"Architect","t_count":"1"},
{"ttext":"Entertainment","t_count":"2"},
{"ttext":"Food","t_count":"2"},
{"ttext":"Gujarati","t_count":"1"},
{"ttext":"Laundry","t_count":"1"},
{"ttext":"Milk","t_count":"2"},
{"ttext":"Rajasthani","t_count":"1"}]

输出就是这样：

（只有ttext文件中的json属性。）

硬编码因子，即return (d.t_count * 30); 绘制矩形。但是当引入缩放时，文本就是输出的全部内容。

这是生成的SVG DOM（width中奇怪地遗漏rect）：

几乎挣扎了一天。任何人都可以查看并请求帮助吗？

Answer 1

在一个比例中，domain和range都必须是数组。

所以，改为：

var widthScale = d3.scaleLinear()
    .domain([0, 3])
    .range([0, canvasWidth]);//range as an array

无法使用scaleLinear（）将值填充到SVG Rectangle的宽度中

1 个答案: