2

主に D3.js を使用してガント チャートの作成に取り組んでいます (機能例へのリンク)。ガント チャートには、個々の日の列 (下の図の右側の列) を区切る垂直のグリッド線があり、全体tableには、各行/プロジェクトを区切る水平のグリッド線があります。生成されたチャートの例を次に示します。

生成されたガント チャートの例

作成される要素の数を大幅に削減し、パフォーマンスを向上させるために、(要素を作成する) プロジェクト/日付アドレスごとにテーブル セルを作成する代わりに、絶対位置に配置された#rows * #daysものを使用して垂直グリッド線を単純に描画することにしました。div各日のヘッダー セル。たとえば、図では30、31、1、 などの各セルには絶対配置divされた があり、その高さはテーブルの高さ全体に手動で設定しました。チャートの構造は次のようになります。

<table>
    <tr><td colspan="5"></td><td>2012-12-30 to ...</td> ... </tr>
    <tr>
        <td></td>
        <td>Est. Duration</td>
        <td>% Completed</td>
        <td>Est. Start Date</td>
        <td>Est. End Date</td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">30</div>
            </div>
        </td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">31</div>
            </div>
        </td>
        <td class="day-cell">
            <div class="inner">
                <div class="background" style="height: 260px;">1</div>
            </div>
        </td>
        ...
    </tr>
    <tr class="project-row">...</tr>
    <tr class="project-row">...</tr>
    ...
</table>

これは、高さを手動で設定する必要があるという最後の警告を除いて、素晴らしく機能します。理想的には、JavaScript を使用せずに、テーブル全体の高さを参照して to の高さを設定できるようにしたいと考えていますが、それが絶対に必要/回避できない場合は、認めdiv.backgroundます。100%この問題は、プロジェクト行の追加または削除を開始すると最も関連性が高く、顕著になります (これをシミュレートするために、div下の図の の高さを減らしました)。

不適切なグリッド線

上記のコードのクラスに関連するスタイルは次のとおりです。

  • div.inner-position: relative; width: 19px
  • div.background-position: absolute; top: -1px; left: -1px; right -1px; line-height: 24px

繰り返しますが、チャートの HTML と CSS (JSBin) の機能例を次に示します。これまでの解決策の試みにpositionは、tabletoの設定relativeやさまざまな類似のものが含まれていました。高さをばかげたもの9999pxに設定overflow-y: hiddenしてテーブルに置くことも考えましたが、もしあればもっときれいな解決策が欲しいです。

フックワードプレスでテンプレートヘッダーのナビゲーションバーメニューセクションにページリンク/メニュー項目を追加する方法

プラグイン ファイルのフックを使用して、テンプレート ナビゲーション バー セクションにメニュー項目/ページ リンクを追加したい。これにはプラグインを使用したくない。フックを使用したい。 

add_action('wp_header', ' xx_add_to_header');
 function xx_add_to_header() {  


 echo "<li><a href='king.php'>DDD</a> </li>";
     }

別のもの： 

 add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
  your_custom_menu_item ( $items, $args ) {
     if (is_single() && $args->theme_location == 'primary') {
    $items .= '<li><a href='king.php'>DDD</a></li>';
     }
    return $items;    
    }

これはうまくいきませんでした。これを行う正しい方法は何ですか????
前もって感謝します

4

1 に答える 1

1

うわー、これは本当に簡単な解決策です。もっと考えてみればよかったのにと思います。

を に設定し、tableからposition: relative配置を削除し、 、、およびスタイルを から削除して設定する.innerだけで、適切に配置されました。topleftright.backgroundheight: 100%

その理由は、要素を絶対に配置すると、デフォルトで、単純に静的に配置されたはずの位置に配置されるためだと思います。したがって、、、または(セル内の正しい場所に配置されるように)divをいじらず、 to を設定するだけで、 を正しい位置に配置できます (これはの高さに相対的です)。の を設定します。topleftrightheight100%tablewidthdiv

于 2013-05-11T07:55:41.860 に答える