D3 JS图形不显示线

奇数球

下面的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>

萨基兰

好吧，经过很少的研发，我发现了出问题的原因。我们需要了解的东西很少。要在两个位置绘制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标度函数，这样x(d.Epoch)将毫无意义。x（）预计会采用日期。我们必须传递适当的值以进行缩放并正确设置域值。

另一件事是我们的数据所有x轴值（d.Date）都与2015年7月3日相同（单个值），因此在这里我们要在单点处绘制直线。并且Y轴值（d.Bluetooth）等于（单个值），即3。

从这些值中，我们预计将绘制线条。所有数据点都将指向（2015年7月3日，3）到（2015年7月3日，3），重复7次。

要查看行，请将正确的值传递给行生成函数的x值，并增加一天中没有的日期值。

希望您理解。如果不要求更多。工作拨弄用数据变形例和修正

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。