Arka Plan Bilgileri

Eclipse-RAP içine NVD3 grafikler bir entegrasyon özel widget çerçevesini kullanarak oluşturdum. Grafik bir div içine oluşturulur. CSS javascript bağlantı girişi oluşturarak dinamik olarak yüklenir. Eğer CSS zaten SVG/metin unsuru oluşturarak yüklü kontrol ediyorum, ve eğer font-size (http://stackoverflow.com/a/7997710/337621) Tamam olmadığını kontrol edin. Eğer CSS yüklenen bir grafik oluşturun.

Sorun

Nedense grafik her zaman Krom doğru işlenir değil. Benim durumumda, genellikle ilk kez doğru görüntülenir, ancak ikinci zaman hep yanlış işlenmiş. Yanlış bir dava için bu konsolu buldum:

Error: Invalid value for <g> attribute transform="translate(NaN,5)"

Eğer grafik çizer (grafik veri güncelleme veya yeniden boyutlandırma örneğin) yaparsam, efsane doğru işlenir.

Beklenen:

Yanlış düzeni:

Bazı hata ayıklama sonra, ilgili d3 kod parçası buldum. NVD3 SVG Metin öğesi bu fonksiyonu kullanmak için boyutu: yazı tipi için sorar

  d3_selectionPrototype.style = function(name, value, priority) {
    var n = arguments.length;
    if (n < 3) {
      if (typeof name !== "string") {
        if (n < 2) value = "";
        for (priority in name) this.each(d3_selection_style(priority, name[priority], value));
        return this;
      }
      if (n < 2) return d3_window.getComputedStyle(this.node(), null).getPropertyValue(name);
      priority = "";
    }
    return this.each(d3_selection_style(name, value, priority));
  };

İlgili CSS kısmı bu

svg text {
  font: normal 12px Arial;
}

Aşağıdaki eklendi "" . printpoint ^em>(asla durmaz, ama değerlerini yazdıran koşullu kesme noktası)getComputedStyle çağrı: satırında

name == 'font-size' &&
(
    console.log(this.node()) ||
    console.log( d3_window.getComputedStyle(this.node(), null) ) ||
    console.log( d3_window.getComputedStyle(this.node(), null).getPropertyValue(name) ) || 
    console.log( window.getMatchedCSSRules(this.node()) )
)

Sonuç gerçekten garip. Eğer grafik doğru ise, doğru düzeni için konsolda bunu buldum:

Ve yanlış bir düzen için bu:

Bu yanlış düzeni için DOM

<svg id="ujdh846lhqubvvlg2jbh16s6q9" width="1896" height="361">
    <g class="nvd3 nv-wrap nv-pieChart" transform="translate(20,90)">
        <g>
            <g class="nv-pieWrap">
                <g class="nvd3 nv-wrap nv-pie nv-chart-6450" transform="translate(0,0)">
                    <g>
                        <g class="nv-pie" transform="translate(928,125.5)">
                            <g class="nv-slice" fill="#1f77b4" stroke="#1f77b4">
                                <path d="M6.1477269317197136e-15,-100.4A100.4,100.4 0 0,1 65.39779726531111,76.17931551835622L0,0Z"/>
                            </g><g class="nv-slice" fill="#ff7f0e" stroke="#ff7f0e">
                                <path d="M65.39779726531111,76.17931551835622A100.4,100.4 0 0,1 -90.13957577290248,44.21557281638648L0,0Z"/>
                            </g><g class="nv-slice" fill="#2ca02c" stroke="#2ca02c">
                                <path d="M-90.13957577290248,44.21557281638648A100.4,100.4 0 0,1 -94.15031406756688,-34.869447385619964L0,0Z"/>
                            </g><g class="nv-slice" fill="#d62728" stroke="#d62728">
                                <path d="M-94.15031406756688,-34.869447385619964A100.4,100.4 0 0,1 -1.844318079515914e-14,-100.4L0,0Z"/>
                            </g>
                        </g><g class="nv-pieLabels" transform="translate(928,125.5)">
                            <g class="nv-label" transform="translate(112.95224431711586,-41.8329177051586)">
                                <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
                                <text style="text-anchor: middle; fill: rgb(0, 0, 0);">alma</text>
                            </g><g class="nv-label" transform="translate(-24.246406744679096,117.98438142386297)">
                                <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
                                <text style="text-anchor: middle; fill: rgb(0, 0, 0);">korte</text>
                            </g><g class="nv-label" transform="translate(-120.2954032887533,6.100692386622933)">
                                <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
                                <text style="text-anchor: middle; fill: rgb(0, 0, 0);">szilva</text>
                            </g><g class="nv-label" transform="translate(-68.80925650816773,-98.86095649341644)">
                                <rect rx="3" ry="3" style="stroke: rgb(255, 255, 255); fill: rgb(255, 255, 255);"/>
                                <text style="text-anchor: middle; fill: rgb(0, 0, 0);">paradicsom</text>
                            </g>
                        </g>
                    </g>
                </g>
            </g><g class="nv-legendWrap" transform="translate(0,-90)">
                <g class="nvd3 nv-legend" transform="translate(0,5)">
                    <g transform="translate(NaN,5)">
                        <g class="nv-series" transform="translate(0,5)">
                            <circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(31, 119, 180); stroke: rgb(31, 119, 180);"/>
                            <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">alma</text>
                        </g><g class="nv-series" transform="translate(0,25)">
                            <circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(255, 127, 14); stroke: rgb(255, 127, 14);"/>
                            <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">korte</text>
                        </g><g class="nv-series" transform="translate(0,45)">
                            <circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(44, 160, 44); stroke: rgb(44, 160, 44);"/>
                            <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">szilva</text>
                        </g><g class="nv-series" transform="translate(0,65)">
                            <circle class="nv-legend-symbol" r="5" style="stroke-width: 2px; fill: rgb(125, 0, 0); stroke: rgb(125, 0, 0);"/>
                            <text text-anchor="start" class="nv-legend-text" dy=".32em" dx="8">paradicsom</text>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

Nasıl SVG/benim yazı tipi boyutu hesaplanmış tarzı hayır vardır AMA bu her zaman uygulanan CSS kurallarını bir yazı tipi boyutunu bir kez olabilir mi?

Bunun için Chrome bazı bilinen hata var?

Firefox her şey düzgün çalışır unutmayın.

Çevre Detayları

39.0.2171.71 (64-bit) krom

3.13.0-29-genel web geliştirme

Güncelleme

Bu "davranış" tarayıcılar : 17**. etkilenen olduğumu düşündüm Bu konsol günlük girdisi zaman bu noktada nesnenin durumunu göstermiyor, ama mevcut durumu ifade eder anlamına gelir. Küçük bir deney yapmış oldum böylece: http://jsfiddle.net/hdv7ty6L/ . Javascript sınıf değiştirdim ve eğer kural listesi konsol veya değişiklikler olmadığını kontrol edin. Ve kural Listesinin bir anlık görüntü gibi görünüyor.Bu yüzden hala bir ipucu yok, ne yanlış burada :)

Test kodu:

document.body.className='redbody';
console.log(window.getMatchedCSSRules(document.body));
document.body.className='bluebody';
console.log("Class changed");
console.log(window.getMatchedCSSRules(document.body));

Konsol çıktı:

Güncelleme 2

Sorun eğer CSS tamamen statik ve dinamik olarak yüklü değilse de olur.

Güncelleme 3

Bir jsfiddle çoğalır denedim: dynamicly SVG uyumsuz olarak oluşturulan grafik ile bir div (bir düğme özelliği) içinde yarattı. Hata ne yazık ki görünmüyor. https://jsfiddle.net/ewsb4d9k/1/

Üzgünüm, D3, ama yardımcı olabilecek kafamın üst kapalı birkaç fikir ile çok akıcı değilim.

D3 kullanmayı denedi.() yöntemini seçin ve sadece yazı tipi boyutunu bu şekilde uygulanması, eğer yazı tipi/o daraltabilirsiniz görmek için seçici kombinasyonu sorun mu var? metin Belki de yük üzerinde kimliği veya bir sınıf atamak, stilleri, statik bir stil kullanarak tanımlayın.

Efsane metin uzunluğu kırma önce garip bir şey fark ettin mi? Efsane ve font css kaldırma zaman 0 işe yarıyor mu?

Adblock kullanıyorsun fark ettim. Eğer zaten yok ama denemeye değer devre dışı bırakmak için. Bu eklenti bazen çılgınca şeyler yapar.

Yük üzerinde tam bir dom yenileme veya konteyner yenileme, denediniz mi? Bu ne oluyor? Zaman 0 kılıyor mu? Hala başarısız mı?

$("body").html($("body").html()); 
$("#d3div").html($("#d3div").html());

bu konu jquery's append not working with svg element? Timo gösterildiği gibi

DOM explorer onları eklemek gibi görünüyor ama değil "ekranında" ve bunun nedeni, html ve svg için farklı bir ad.

En kolay çözüm "" bütün svg. yenilemek için.

Bu bir WordPress kullanmak çalıştığın gibi görünmüyor ama bu durumda test etmek için yararlı olabilir.

Üzgünüm senin saçma bug'ı duydum. Bir çözüm bulacağını umuyorum.