يضيف NVD3 حدودًا/حدودًا إلى المخطط المساحي

Question

لدي مخطط مساحي مكدس مثل الموجود في: http://nvd3.org/ghpages/stackedArea.html

هل من الممكن إضافة حد إلى الجزء العلوي من جزء المنطقة من قطعة الأرض بحيث يبدو أنه يحتوي على حد/حد؟

لقد حاولت إضافة ضربة باستخدام مفتش webkit ولكن لا يبدو أن شيئًا يحدث (بافتراض أن هذا يشبه استخدام .style('stroke','#000000')

لذا، إذا كانت هناك سلسلة واحدة فقط في stackedAreaExample وكانت باللون الأزرق، فإن الحدود ستجعلها تبدو كما يلي:

Answer 1

لا توجد حدود على هذا النحو في SVG، لذا يتعين عليك إضافة مستطيل يحدد الحدود ويعين النمط المناسب.ليس لدى NVD3 خيار لهذا، لكن يمكنك تحديد العنصر ذي الصلة بعد رسمه وإضافة المحتوى الجديد.

d3.select(".nv-stackedWrap")
.append("rect")
.attr("width", chart.xAxis.scale().range()[1])
.attr("height", chart.yAxis.scale().range()[0])
.style("fill", "none")
.style("stroke", "black");

يعمل هذا مع المخطط المساحي المكدس؛بالنسبة للأنواع الأخرى من المخططات، سيكون اسم فئة العنصر الذي سيتم تحديده مختلفًا.

يعد تعيين حد في المنطقة العلوية أمرًا أكثر تعقيدًا، حيث أن SVG لا يسمح لك بتعيين الحد لجانب واحد فقط من الشكل path.يمكنك أن تفعل ذلك مع stroke-dasharray ومع ذلك - تحتاج فقط إلى الطول الإجمالي للمسار.

d3.select(".nv-area-" + (data.length-1))
    .style("stroke", "black")
    .style("stroke-opacity", 1)
    .style("stroke-dasharray", function() {
      return this.getTotalLength()/2 + "," + this.getTotalLength();
    });

هذا يحدد الأخير (أي.top) المنطقة ويحدد الحد لها.تعني Dasharray المحدد أنه سيكون هناك حد لنصف الملف path (أي.الجزء العلوي) ثم لا شيء لطول المسار (لجعله يبدو كما لو لم يكن هناك سوى حد في الأعلى).

المشكلة في هذا مع NVD3 هي الانتقال الذي "ينمي" المناطق.إذا قمت بتشغيل هذا الرمز عند إنشاء الرسم البياني، فقد يكون طول الخط أقصر مما سيكون عليه في النهاية.للتأكد من صحة الطول، ستحتاج إلى (إعادة) تشغيل هذا الرمز بعد اكتمال عملية النقل، على سبيل المثال.استخدام setTimeout.

Answer 2

بدلاً من ذلك، يمكنك فقط رسم مخطط خطي بنفس البيانات بلون أغمق والذي سيبدو كالحدود.

    var areaFunc = d3.svg.area()
        .interpolate("monotone")
        .x(function(d) { return d.index; })
        .y0(THIS.height)
        .y1(function(d) { return d.delay });

    var lineFunc = d3.svg.line()
        .x(function(d) { return d.index; })         
        .y(function(d) { return d.delay });

           .......

    svg.append("path")
      .datum(myData)
      .attr("class", "area")
      .attr("d", areaFunc);

    svg.append("path")
      .datum(myData)
      .attr("class", "line")  // with a darker color
      .attr("d", lineFunc);