Question

我有一个d3折线图的小视觉问题。

也许任何人都有一个简短的解决方案：

我希望下面的三条线比它们更平滑。

我宁愿让线条看起来像这样：

我已经检查过，这不是导致这种错误视觉行为的笔画宽度。

如果问题不明确：基本上，我想要获得更高的图表分辨率，看起来它包含更大的像素。

这是导致此结果的代码：

var temp = g.selectAll(".temp")
        .data(stationData)
        .enter().append("g")
        .attr("class", "temp");

    let values = stationData.map(function(d){
        return {
            "hour": parseFloat(d.hour),
            "temperature": parseFloat(d.avgtemp)
        }
    });
    temp.append("path")
        .attr("id", "avgtemp")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(values);
        })
    temp.append("text")
        .datum(function(d) { return {value: values[values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.hour) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "12px sans-serif")
        .text("Avg Temperature");


    values = stationData.map(function(d){
        return {
            "hour": parseFloat(d.hour),
            "temperature": parseFloat(d.mintemp)
        }
    });
    temp.append("path")
        .attr("id", "mintemp")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(values);
        })
    temp.append("text")
        .datum(function(d) { return {value: values[values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.hour) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "12px sans-serif")
        .text("Min Temp");

    values = stationData.map(function(d){
        return {
            "hour": parseFloat(d.hour),
            "temperature": parseFloat(d.maxtemp)
        }
    });
    temp.append("path")
        .attr("id", "maxtemp")
        .attr("class", "line")
        .attr("d", function(d) {
            return line(values);
        })
    temp.append("text")
        .datum(function(d) { return {value: values[values.length - 1]}; })
        .attr("transform", function(d) { return "translate(" + x(d.value.hour) + "," + y(d.value.temperature) + ")"; })
        .attr("x", 3)
        .attr("dy", "0.35em")
        .style("font", "12px sans-serif")
        .text("Max Temp");

Answer 1

问题很容易解决：

我的代码中有一个d3语句，多次添加相同的图表。实际上我的数据集中的数据项数量，这是由于此代码段：

  var temp = g.selectAll(".temp")
        .data(stationData)
        .enter().append("g")
        .attr("class", "temp");

结果现在是：

我基本上需要更改的是用 g 替换所有 temp 变量， g 是当前 temp 的父级和子级的 SVG ：

Answer 2

这是因为您生成的SVG的shape-rendering属性。

http://d3plus.org/examples/advanced/248b7a374015f95790eb/

使用.shape（）方法中的渲染键来进一步控制SVG 在D3plus可视化中生成的所有形状上的形状渲染。

.shape({
      "rendering":"optimizeSpeed" // fine-tune SVG shape rendering
    })

有关SVG的Shape渲染的更多详细信息MDN

资源：

https://coderwall.com/p/ufldzw/for-crisp-edges-use-anything-but-crispedges

如何使d3折线图中的线条更流畅？

2 个答案: