Question

我尝试构建d3图形，其中行和列组合在一起，但我的所有尝试都没有成功。

样式：

svg {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

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

.axis text{
    font: Times;
    font-size: 12px;
    font-weight: bold;
}

JavaScript的：

var margin = {top: 20, right: 10, bottom: 100, left:50},
    width = 700 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
    .append("svg")
    .attr ({
        "width": width + margin.right + margin.left,
        "height": height + margin.top + margin.bottom
    })
    .append("g")
    .attr("transform","translate(" + margin.left + "," + margin.right + ")");


// define x and y scales
var xScale = d3.scale.ordinal()
    .rangeRoundBands([0,width], 0.93, 0.93);

var yScale = d3.scale.linear()
    .range([height, 0]);

var formater = d3.format("");

// define x axis and y axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .tickFormat(formater);


d3.csv("result.csv", function(error,data) {
    if(error) console.log("Error: data not loaded!");


    data.forEach(function(d) {
        d.day = d.day;
        d.dayStr = d.dayStr;
        d.Ratio = +d.Ratio;
        console.log(d.dayStr);
    });



    // Specify the domains of the x and y scales
    xScale.domain(data.map(function(d) { return d.dayStr; }) );
    yScale.domain([0, 6]);



    // Draw xAxis and position the label
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .selectAll("text")
        .attr("dx", "-.8em")
        .attr("dy", ".25em")
        .attr("transform", "rotate(-60)" )
        .style("text-anchor", "end")
        .attr("font-size", "10px");


    // Draw yAxis and postion the label
    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("x", -height/8)
        .attr("dy", "-3em")
        .style("text-anchor", "middle")
        .text("Risk Value (in %)");
});

数据：

Day,DayStr,Ratio,Note
2016-06-29T00:00:00+03:00,06-29-2016,1.3,
2016-06-30T00:00:00+03:00,06-30-2016,1.4,
2016-07-01T00:00:00+03:00,07-01-2016,1.2,
2016-07-02T00:00:00+03:00,07-02-2016,1.7,
2016-07-03T00:00:00+03:00,07-03-2016,1.9,
2016-07-04T00:00:00+03:00,07-04-2016,2.2,
2016-07-05T00:00:00+03:00,07-05-2016,2.5,
2016-07-06T00:00:00+03:00,07-06-2016,2.5,
2016-07-07T00:00:00+03:00,07-07-2016,2.4,
2016-07-08T00:00:00+03:00,07-08-2016,2.7,
2016-07-09T00:00:00+03:00,07-09-2016,3.1,
2016-07-10T00:00:00+03:00,07-10-2016,3.5,
2016-07-11T00:00:00+03:00,07-11-2016,3.7,
2016-07-12T00:00:00+03:00,07-12-2016,4.5,
2016-07-13T00:00:00+03:00,07-13-2016,4.4,
2016-07-14T00:00:00+03:00,07-14-2016,5,Alert!

链接到完整code。

最终结果应该是这样的：

Answer 1

您的代码是一个很好的起点，但您还没有绘制任何列，点或文本。这是一种方法：

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

  colAndPointAndText.append("rect")
    .attr("x", function(d) {
      return xScale(d.dayStr);
    })
    .attr("width", xScale.rangeBand())
    .attr("y", function(d) {
      return yScale(d.Ratio);
    })
    .attr("height", function(d) {
      return height - yScale(d.Ratio);
    })
    .style("fill", "black");

  colAndPointAndText.append("circle")
    .attr("cx", function(d) {
      return xScale(d.dayStr);
    })
    .attr("cy", function(d) {
      return yScale(d.Ratio);
    })
    .attr("r", 5)
    .style("fill", "none")
    .style("stroke", "orange")
    .style("stroke-width", "2px")

  colAndPointAndText.append("text")
    .attr("x", function(d) {
      return xScale(d.dayStr);
    })
    .attr("y", function(d) {
      return yScale(d.Ratio);
    })
    .text(function(d) {
      return d.Note;
    })
    .style("fill", "#d62728")

  var line = d3.svg.line()
    .x(function(d) {
      return xScale(d.dayStr);
    })
    .y(function(d) {
      return yScale(d.Ratio);
    });

  svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)
    .style("fill", "none")
    .style("stroke", "steelblue")
    .style("stroke-width", "2px");

完整代码running here。

将csv数据转换为d3图表

1 个答案: