Question

我想用d3.js绘制一个xy多张系列线图。没关系。但之后我想缩放x轴序数。

这就是我xy折线图的代码：

 <!DOCTYPE html>
 <meta charset="utf-8">
  <style>
   body {
    font: 12px Arial;
}

path {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

div.tooltip {
    position: absolute;
    text-align: center;
    padding: 5px;
    font: 14px sans-serif;
    background: black;
    color: white;
    border: 0px;
    border-radius: 8px;
}

.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1px;
}

  </style>
  <body>
  <script src="d3.js"></script>
  <script src="jquery-2.1.4.js" charset="utf-8"></script>
   <script>
       var margin = {
            top: 20,
            right: 20,
            bottom: 20,
            left: 50
        },
        width = 1180 - margin.left - margin.right,
        height = 580 - margin.top - margin.bottom;

var x = d3.scale.linear().rangeRound([0, width]);
var y = d3.scale.linear().rangeRound([height, 0]);

var linearScale = d3.scale.linear();

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");

var svg = d3.select("body").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 + ")");

/*  var line = d3.svg.line()
 .x(function(d) { console.log('x'+x(d.arbeitsgang));return x(d.arbeitsgang); })
 .y(function(d) { console.log('y'+y(d.koordinaten));return y(d.koordinaten); });
 */
var line = d3.svg.line()
        .x(function (d) {
            return x(d.x);
        })
        .y(function (d) {
            return y(d.y);
        });

// Define 'div' for tooltips
var div = d3.select("body")
        .append("div")  // declare the tooltip div
        .attr("class", "tooltip")              // apply the 'tooltip' class
        .style("opacity", 0);                  // set the opacity to nil

//d3.json("Arbeitsgang.json", function(error, data) {
var data = [
    {
        "key": "Paket 1",
        "values": [
            {
                "x": 0,
                "y": 40,
                "arbeitsgang": "A1"
            },
            {
                "x": 6,
                "y": 30,
                "arbeitsgang": "A2"
            },
            {
                "x": 17,
                "y": 20,
                "arbeitsgang": "A3"
            }
        ]
    },
    {
        "key": "Paket 3",
        "values": [
            {
                "x": 0,
                "y": 85,
                "arbeitsgang": "A1"
            },
            {
                "x": 8,
                "y": 50,
                "arbeitsgang": "A2"
            },
            {
                "x": 17,
                "y": 89,
                "arbeitsgang": "A3"
            }
        ]
    },
    {
        "key": "Paket 2",
        "values": [
            {
                "x": 0,
                "y": 45,
                "arbeitsgang": "A1"
            },
            {
                "x": 6,
                "y": 145,
                "arbeitsgang": "A1"
            },
            {
                "x": 17,
                "y": 53,
                "arbeitsgang": "A1"
            }
        ]
    }
];

linearScale.domain(d3.keys(data[0]).filter(function (key) {
    return key;
}));


x.domain([
    d3.min(data, function (c) {
        return d3.min(c.values, function (v) {
            return v.x;
        });
    }),
    d3.max(data, function (c) {
        return d3.max(c.values, function (v) {
            return v.x;
        });
    })
]);
y.domain([
    d3.min(data, function (c) {
        return d3.min(c.values, function (v) {
            return v.y;
        });
    }),
    d3.max(data, function (c) {
        return d3.max(c.values, function (v) {
            return v.y;
        });
    })
]);

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

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

var graphen = svg.selectAll(".graphen")
        .data(data)
        .enter().append("g")
        .attr("class", "graphen");

var graph = graphen.append("path")
        .attr("class", "line")
        .attr("d", function (d) {
            return line(d.values);
        });

graph.on("mouseover", function (d) {
    d3.select(this).style("stroke-width", 7);

    div.transition()
            .duration(200)
            .style("opacity", .9);
    div.html(d.key)
            .style("left", (d3.event.pageX) + "px")
            .style("top", (d3.event.pageY - 28) + "px");

    div.style("visibility", "visible");

    var selectthegraphs = $('.line').not(this);     //select all the rest of the lines, except the one you are hovering on and drop their opacity
    d3.selectAll(selectthegraphs)
            .style("opacity", 0.2);

    var selectcircles = $('.circle');
    d3.selectAll(selectcircles)
            .style("opacity", 0.2);
})
        .on("mouseout", function () {
            d3.select(this).style("stroke-width", 1);
            div.transition()
                    .duration(500)
                    .style("opacity", 0.01);

            div.style("visibility", "hidden");

            var selectthegraphs = $('.line');     //select all the rest of the lines, except the one you are hovering on and drop their opacity
            d3.selectAll(selectthegraphs)
                    .style("opacity",1);

            var selectcircles = $('.circle');
            d3.selectAll(selectcircles)
                    .style("opacity", 1);
        });

graphen.each(function (p, j) {
    d3.select(this).selectAll("circle")
            .data(p.values)
            .enter().append("circle")
            .style("stroke", "black")
            .style("fill", "white")
            .attr("class","circle")
            .attr("r", 5)
            .attr("cx", function (d) {
                return x(d.x);
            })
            .attr("cy", function (d) {
                return y(d.y);
            })
            .on("mouseover", function (d) {
                d3.select(this).transition().duration(500)
                        .attr("r", 10);
                div.transition()
                        .duration(500)
                        .style("opacity", 0.9);
                div.style("visibility", "visible");

                div.html("X: " + d.x + "<br/>" + "Y: " + d.y + "<br/>" + "Arbeitsgang: " + d.arbeitsgang)
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function (d) {
                d3.select(this).transition().duration(500)
                        .attr("r", 5);
                div.transition()
                        .duration(500)
                        .style("opacity", 0);
                div.style("visibility", "hidden");
            })
});

确定。但现在我想要一个带有序数的相同图形。刻度应为＆＃34; data.values.arbeitsgang＆＃34;

＆＃34; arbeitsgang＆＃34;：＆＃34; A1＆＃34;例如。

请帮帮我

Answer 1

序数尺度并不那么难。

var x = d3.scale.ordinal()
                   .domain(["A1","A2","A3"])
                   .rangeRoundPoints([0, width]);

现在，刻度应该将从0到宽度的范围分成3个相同大的部分。我选择rangeRoundPoints因为ticks的值被舍入为整数然后我喜欢整数。

我相信你可以自定义x轴的文本（当然使用你的顺序刻度来缩放轴），显示＆＃34; Arbeitsgang：A1＆＃34;例如，但我不知道如何做到这一点。

有关序数比例的更多信息，请查看this link。除非我完全误解了这个问题，否则我认为这是你唯一需要的。

我意识到我已经硬编码了域的值，但是包含这些值的数组也可以。

D3.js xy线图与序数比例

1 个答案: