Question

下面的d3图表运行良好...除非我在图表上看不到结果行。我可以检查Chrome中的元素，并且该行的所有值都在那里，但没有可见的行。

我很确定这是一个CSS问题，但我无法弄明白。

非常感谢任何帮助！

var data = [
   {
    Day : 'Sunday',
    Time : '0.00',
    Bluetooth : '3',
    Date : '03\/06\/2015',
    Epoch : '1440808200'
},
{
    Day : 'Sunday',
    Time : '0.25',
    Bluetooth : '3',
    Date : '03\/06\/2015',
    Epoch : '1440809100'
},
{
    Day : 'Sunday',
    Time : '0.50',
    Bluetooth : 3,
    Date : '03\/06\/2015',
    Epoch : '1440810000'
},
{
    Day : 'Sunday',
    Time : '0.75',
    Bluetooth : '3',
    Date : '03\/06\/2015',
    Epoch : '1440810900'
},
{
    Day : 'Sunday',
    Time : '1.00',
    Bluetooth : '3',
    Date : '03\/06\/2015',
    Epoch : '1440811800'
},
{
    Day : 'Sunday',
    Time : '1.25',
    Bluetooth : '3',
    Date : '03\/06\/2015',
    Epoch: 1440812700
},
{
    Day : 'Sunday',
    Time : '1.50',
    Bluetooth : '3',
    Date : '03\/06\/2015',
    Epoch : '1440813600'
}];





// Set the dimensions of the canvas / graph
var margin = {top: 10, right: 10, bottom: 100, left: 40},           //main margins
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},			// lower margins
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,						//main height
    height2 = 500 - margin2.top - margin2.bottom;					//lower height

// Parse the date / time
var parseTime = d3.time.format("%H.%M").parse;
var parseDate = d3.time.format("%d/%m/%Y").parse;

var x = d3.time.scale().range([0, width]),							//x scale for main part
    x2 = d3.time.scale().range([0, width]),							//x scale for lower part
    y = d3.scale.linear().range([height, 0]),						//y scale for main part
    y2 = d3.scale.linear().range([height2, 0]);						// y scale for lower part

// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom"),				//x axis for main
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),				//x axis for lower
    yAxis = d3.svg.axis().scale(y).orient("left");					//y axis for both

var brush = d3.svg.brush()
    .x(x2)															//brush is for lower x scale
    .on("brush", brushed);

var valueline = d3.svg.line()
     //.interpolate( "step-before" )
    .x(function (d) { return x(d.Epoch);}).y(function (d) {return y(d.Bluetooth);});

var valueline2 = d3.svg.line()
    //.interpolate( "step-before" )
    .x(function (d) { return x(d.Epoch);}).y(function (d) {return y(d.Bluetooth);});

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
    .append("rect")
    .attr("width", width)
    .attr("height", height);

var focus = svg.append("g")
    .attr("class", "focus")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
    .attr("class", "context")
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");


    data.forEach(function (d) {

        d.Date = parseDate(d.Date);
        d.Time = +d.Time;
        d.Bluetooth = +d.Bluetooth;
        d.Epoch = +d.Epoch;
    });

    // Scale the range of the data
    x.domain(d3.extent(data.map(function(d) { return d.Date; })));
    y.domain([0, d3.max(data.map(function(d) { return d.Bluetooth; }))]);
    x2.domain(x.domain());
    y2.domain(y.domain());


    focus.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", valueline(data));
    console.log(valueline(data));

    focus.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    context.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", valueline2(data));
    console.log(valueline2(data));


    context.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height2 + ")")
        .call(xAxis2);

    context.append("g")
        .attr("class", "x brush")
        .call(brush)
        .selectAll("rect")
        .attr("y", -6)
        .attr("height", height2 + 7);




function brushed() {
    x.domain(brush.empty() ? x2.domain() : brush.extent());
    focus.select(".line").attr("d", valueline);
    console.log(valueline);
    focus.select(".x.axis").call(xAxis);
}

    body {
        font: 12px Arial;
    }

    .line {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
    }

    .axis path,
    .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
    }

    .brush .extent {
        stroke: #fff;
        fill-opacity: .125;
        shape-rendering: crispEdges;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Answer 1

好吧，在做了一点R＆amp; D之后，我发现了什么是错的原因。我们需要了解的事情很少。要在两个地方绘制x轴，我们设置

x.domain(d3.extent(data.map(function(d) { return d.Date; })));

所以x域设置了日期，但是我们正在使用

绘制线

var valueline = d3.svg.line()
     //.interpolate( "step-before" )
    .x(function (d) { return x(d.Epoch);}).y(function (d) {return y(d.Bluetooth);});

var valueline2 = d3.svg.line()
    //.interpolate( "step-before" )
    .x(function (d) { return x(d.Epoch);}).y(function (d) {return y(d.Bluetooth);});

在上面的代码中我们使用的是d.Epoch，这里我们将d.Epoch值传递给x scale函数，就像这个x(d.Epoch)这样没有意义。 x（）期待日期。我们必须将适当的值传递给比例并正确设置域值。

另一件事是我们的数据所有x轴值（d.Date）都是相同的（单值），即2015年7月3日，所以我们在这里想要绘制单线的线条。并且 Y轴值（d.Bluetooth）相同（单个值）为3。

从这些值我们期待绘制线所有数据点将指向（2015年7月3日，3日）至（2015年7月3日，3日）重复7次。

要查看该行将正确的值传递给行生成函数的x值，并且不是在一天内增加日期值。

希望你明白。如果不要求更多。使用数据修改和更正

工作fiddle

d3 js图表不显示行

1 个答案: