javascript - d3 js图形不显示线

Question

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

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

代码基于此:Focus+Context via Brushing

如有任何帮助，我们将不胜感激!

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

好吧，在做了一些研发之后，我找到了问题的原因。我们需要了解的事情很少。要在我们设置的两个地方绘制 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。

根据这些值，我们期望画出一条线所有数据点将指向(3rd July,2015, 3)至(3rd July,2015, 3)重复 7 次。

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

希望您理解。如果没有，请要求更多。工作 fiddle含数据修改和更正